随机值

随机生成的值可用于在动画中创造多样性和不可预测性。在 Motion Canvas 中，这是使用 useRandom() 函数实现的。它返回当前场景的随机数生成器 (RNG)：

import {useRandom} from '@motion-canvas/core';

const random = useRandom();
const integer = random.nextInt(0, 10);

在这种情况下，调用 nextInt() 将返回 0 到 10（不包括）范围内的整数。查看 Random api 以查看所有可用的方法。

与 Math.random() 不同，useRandom() 是完全可重现的 - 每次播放动画时，生成的值都将完全相同。用于生成这些数字的种子存储在每个场景的元文件中。

您还可以提供自己的种子以找到最适合您需求的数字序列：

const random = useRandom(123);

本页顶部的动画使用随机数生成器来改变矩形的高度，使它们看起来像声波：

import {Layout, Rect, makeScene2D} from '@wangyaoshen/locus-2d';
import {
  all,
  loop,
  makeRef,
  range,
  sequence,
  useRandom,
} from '@wangyaoshen/locus-core';

export default makeScene2D(function* (view) {
  const random = useRandom();
  const rects: Rect[] = [];

  view.add(
    <Layout layout gap={10} alignItems="center">
      {range(40).map(i => (
        <Rect
          ref={makeRef(rects, i)}
          radius={5}
          width={10}
          height={10}
          fill={'#e13238'}
        />
      ))}
    </Layout>,
  );

  yield* loop(3, () =>
    sequence(
      0.04,
      ...rects.map(rect =>
        all(
          rect.size.y(random.nextInt(100, 200), 0.5).to(10, 0.5),
          rect.fill('#e6a700', 0.5).to('#e13238', 0.5),
        ),
      ),
    ),
  );
});