Transitions

Transitions 允许你自定义场景从一个场景转换到另一个场景的方式。过渡是在场景开始时执行的动画。它可以修改当前场景和前一个场景的上下文。

Before we start

确保你的项目至少包含两个场景。在此示例中，我们准备了 firstScene.tsx 和 secondScene.tsx，并将项目配置为一个接一个地显示。我们将在第二个场景中设置我们的过渡。

确保在两个场景中放置不同的内容，以便更容易看到过渡。

my-animation/
└─ src/
   ├─ scenes/
   │  ├─ firstScene.tsx
   │  └─ secondScene.tsx
   └─ project.ts

Pre-made transitions

Motion Canvas 附带了一组常见的过渡，以易于使用的生成器的形式。要使用它们，在新场景的开头 yield* 过渡生成器：

src/scenes/secondScene.tsx
export default makeScene2D(function* (view) {
  // 设置场景：
  view.add(/* your nodes here */);

  // 执行向左滑动过渡：
  yield* slideTransition(Direction.Left);

  // 继续动画
  yield* waitFor(3);
});

确保在 yield 过渡生成器之前将节点添加到视图中。否则，你的场景将保持为空，直到过渡结束。

下面列出了所有可用的过渡：

slideTransition

API 文档

---

zoomInTransition

API 文档

---

zoomOutTransition

API 文档

---

fadeTransition

API 文档

---

waitTransition

API 文档

---

Custom transitions

你可以使用 useTransition 函数来实现自定义过渡。它允许你指定两个回调，分别修改当前场景和前一个场景的上下文。它返回的值是一个回调，你需要在完成过渡后调用它。

过渡模板如下所示：

// 设置过渡
const endTransition = useTransition(
  currentContext => {
    // 修改当前场景的上下文
  },
  previousContext => {
    // 修改前一个场景的上下文
  },
);

// 执行动画

// 完成过渡
endTransition();

以下是实现简单滑动过渡的方法：

export function* slideTransition(
  direction: Direction = Direction.Top,
  duration = 0.6,
): ThreadGenerator {
  const size = useScene().getRealSize();
  const position = size.getOriginOffset(direction).scale(2);
  const previousPosition = Vector2.createSignal();
  const currentPosition = Vector2.createSignal(position);

  // 设置过渡
  const endTransition = useTransition(
    // 修改当前场景的上下文
    ctx => ctx.translate(currentPosition.x(), currentPosition.y()),
    // 修改前一个场景的上下文
    ctx => ctx.translate(previousPosition.x(), previousPosition.y()),
  );

  // 执行动画
  yield* all(
    previousPosition(position.scale(-1), duration),
    currentPosition(Vector2.zero, duration),
  );

  // 完成过渡
  endTransition();
}

Animate when transitioning

默认情况下，一旦当前场景的生成器到达末尾，Motion Canvas 将转换到下一个场景。在这种情况下，场景将在过渡期间冻结。你可以使用 finishScene 函数提前触发过渡，允许动画在过渡期间继续：

export default makeScene2D(function* (view) {
  yield* animationOne();
  // 提前触发过渡：
  finishScene();
  // 继续动画：
  yield* animationTwo();
});