Getting Started

📄️ 快速开始

在本指南中,我们将使用 Motion Canvas 创建一个简单的动画。

Motion Canvas 使用生成器函数来描述动画。

场景是显示在动画中的节点的集合。它们以树状层次结构组织,场景视图位于其根目录。这个概念类似于用于表示 HTML 和 XML 文档的文档对象模型。

Motion Canvas 使用笛卡尔坐标系。其原点位于场景的中心,x 轴向右,y 轴向下。

布局允许您使用 Flexbox 排列节点。任何扩展 Layout 节点的节点都可以成为布局的一部分。这包括但不限于:Rect、Circle 和 Img。

Signals 代表可能随时间变化的值。它们可用于定义动画状态之间的依赖关系。这样,当值更改时,所有依赖于它的其他值都会自动更新。

Effects 让你观察 signal 的变化并对它们做出反应。与 signals 不同，effects 不是惰性的：

通常，在创建节点时，我们希望存储对它的引用，以便稍后可以为其制作动画。一种方法是先将其分配给变量，然后将其添加到场景中：

Tweens 是动画的基本构建块之一。它们是一种特殊类型的生成器，在给定的时间内两个值之间进行动画处理。

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

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

Motion Canvas 内置了一个简单的正交相机，允许你平移、缩放和旋转场景的视口，而无需转换场景中的单个对象。

调试代码或动画流程的一种方法是使用日志消息。为此，motion-canvas 有自己的内置日志记录方法。

在本章中，我们将了解 Motion Canvas 允许你添加到动画中的所有不同类型的媒体。

2 个项目

除了导出动画之外，你还可以使用 Motion Canvas 实时展示它们。只需在动画中定义一些幻灯片，然后使用演示模式在它们之间导航。

Motion Canvas 在 Vite 的配置文件中进行配置: