signals

# Motion Canvas 中的信号 (Signals) 信号代表随时间变化的数值。它们在属性之间创建响应式依赖关系，当源数值发生变化时，会自动更新依赖值。 ## 创建信号 typescript import {createSignal} from '@motioncanvas/core/lib/signals'; // 创建一个简单的信号 const radius = createSignal(10); // 获取当前值 console.log(radius()); // 10 // 设置新值 radius(20); console.log(radius()); // 20 ## 计算信号 (Computed Signals) 创建依赖于其他信号的信号： typescript import {createSignal, createComputed} from '@motioncanvas/core/lib/signals'; const radius = createSignal(10); // 当半径变化时，面积会自动更新 const area = createComputed(() => Math.PI * radius() ** 2); console.log(area()); // ~314.159 radius(20); console.log(area()); // ~1256.637 ## 组件中的信号 组件使用信号来实现响应式属性： typescript import {makeScene2D} from '@motioncanvas/2d/lib/scenes'; import {Circle} from '@motioncanvas/2d/lib/components'; import {createRef, createSignal} from '@motioncanvas/core/lib/utils'; export default makeScene2D(function* (view) { const circleRef = createRef(); const radiusSignal = createSignal(50); view.add( radiusSignal() * 2} // 响应式绑定 fill="#e13238" /> ); // 对信号进行动画处理 yield* radiusSignal(100, 2); }); ## 绑定信号 将信号链接在一起以实现同步更新： typescript export default makeScene2D(function* (view) { const circle1 = createRef(); const circle2 = createRef(); view.add( { mySignal(easeInOutCubic(value, 0, 100)); }); }); ## 资源 - [Motion Canvas 信号文档](https://motioncanvas.io/docs/signals/)