运行时

运行时插件允许您扩展运行时组件，如场景和播放器。

让我们首先创建入口点 - 一个导出我们插件的简单文件。目前，我们将该文件放在 Motion Canvas 项目的 src 目录中。如果您发现自己在多个项目中重用插件，可以将其放在单独的包中。

要定义插件，我们将配置对象传递给 [makePlugin][make-plugin] 辅助函数并导出结果。name 是唯一必需的属性。player 是一个可选的钩子，将在创建后立即接收 Player 实例。查看 Plugin 接口以获取可用钩子的完整列表。

Project structure
  project/
  ├── src/
  │   ├── scenes/
  │   │   └── example.tsx
+ │   ├── plugin.ts
  │   └── project.ts
  ├── package.json
  ├── tsconfig.json
  └── vite.config.ts

src/plugin.ts
import {makePlugin} from '@motion-canvas/core';

export default makePlugin({
  name: 'motion-canvas-plugin-example',
  player(player) {
    player.onRecalculated.subscribe(() => {
      player.requestReset();
      player.togglePlayback(true);
    });
  },
});

在此示例中，我们订阅 onRecalculated 事件，以便在每次发生此事件时从头开始播放动画。当我们在编辑器或代码中编辑动画时，会发生重新计算。

现在我们可以在项目文件中导入插件。请注意，[makePlugin][make-plugin] 返回一个我们需要调用的函数来创建实际的插件对象（这在开发 Node.js 插件时可能会派上用场）：

src/project.ts
import {makeProject} from '@motion-canvas/core';
import myPlugin from './plugin';
import example from './scenes/example?scene';

export default makeProject({
  scenes: [example],
  plugins: [myPlugin()],
  //                ^^ 我们需要调用函数
});