Motion Canvas 动画

# Motion Canvas 中的动画 Motion Canvas 使用基于属性的动画系统，通过生成器函数随时间对各个属性进行补间（Tweening）。 ## 基本属性动画 typescript import {makeScene2D} from '@motioncanvas/2d/lib/scenes'; import {Circle} from '@motioncanvas/2d/lib/components'; import {createRef} from '@motioncanvas/core/lib/utils'; export default makeScene2D(function* (view) { const circle = createRef(); view.add(); // 在 1.5 秒内将大小从当前值 (100) 动画化到 200 yield* circle().size(200, 1.5); }); ## 多属性动画 同时动画化多个属性： typescript import {all} from '@motioncanvas/core/lib/flow'; export default makeScene2D(function* (view) { const circle = createRef(); view.add(); // 同时动画化多个属性 yield* all( circle().size(200, 1.5), circle().position.x(300, 1.5), circle().fill('#e6a700', 1.5), ); }); ## 缓动函数 (Easing Functions) 使用缓动控制动画曲线： typescript import {easeInOutCubic, easeInBounce} from '@motioncanvas/core/lib/tweening'; export default makeScene2D(function* (view) { const circle = createRef(); view.add(); // 使用立方缓动 yield* circle().size(200, 1.5, easeInOutCubic); // 使用弹跳缓动 yield* circle().position.y(200, 1, easeInBounce); }); ## From-To 动画 明确指定起始值和结束值： typescript export default makeScene2D(function* (view) { const circle = createRef(); view.add(); // 从 50 动画化到 200 yield* circle().size(200, 1.5).from(50); // 或者使用更长的语法 yield* tween(1.5, value => { circle().size(map(50, 200, value)); }); }); ## 循环动画 创建重复动画： typescript import {loop} from '@motioncanvas/core/lib/flow'; export default makeScene2D(function* (view) { const circle = createRef(); view.add(); // 循环 3 次 yield* loop(3, () => circle().size(200, 1).to(100, 1)); // 无限循环 yield* loop(Infinity, function* () { yield* circle().rotation(360, 2); }); }); ## 链式动画 流畅地序列化动画： typescript export defa