Time Events

使用代码创建说明动画的一个痛点是将它们与音频同步。想象一下，你希望某个动画在特定的语音提示之后立即开始。使用仅代码的解决方案，你只能硬编码要等待多长时间（或直到哪一帧）。

在 Motion Canvas 中，它可能看起来像这样：

yield * animationOne();
yield * waitFor(3.1415); // 但是我们应该等待多久？
yield * animationTwo();

显然，这种方法可能真的非常乏味。你不仅要找到要等待的确切时间戳，而且每次修改旁白时，你都必须遍历代码并调整这些硬编码的数字。

这就是为什么 Motion Canvas 允许你通过编辑器而不是代码来编辑这些延迟。通过使用 waitUntil，你可以暂停动画而无需指定实际持续时间：

yield * animationOne();
yield * waitUntil('event'); // 等待名为 "event" 的事件
yield * animationTwo();

这将导致事件出现在编辑器中。从那里，你可以拖动它来调整其时间：

事件后面的深色轨迹说明其持续时间。它从调用 waitUntil 的那一刻开始 - 这是动画暂停的时间。它将在播放头到达事件药丸时恢复。

默认情况下，调整时间事件也会调整之后发生的所有事件。当你想要延长或缩短旁白中的暂停时，这很有用，因为在暂停后更正第一个时间事件也将修复之后的所有事件。你可以在编辑事件时按住 SHIFT 来防止这种情况发生。

Controlling animation duration

除了指定某事应该何时发生之外，Time Events 还可用于控制某事应该持续多长时间。你可以使用 useDuration 函数来检索事件的持续时间并在动画中使用它：

yield * circle().scale(2, useDuration('event'));