跳到主要内容

配置

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

vite.config.ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';

export default defineConfig({
  plugins: [
    motionCanvas({
      // 自定义选项
    }),
  ],
});

project​

  • 类型: string | string[]
  • 默认值: ./src/project.ts

项目文件的导入路径,相对于配置文件。也支持 glob 模式。项目文件必须包含一个带有 Project 类实例的默认导出。

当设置为数组时,编辑器将显示项目选择屏幕,使得可以在不重启 Vite 的情况下更改项目。

motionCanvas({
  project: [
    './src/firstProject.ts',
    './src/secondProject.ts',
  ],
});

output​

  • 类型: string
  • 默认值: ./output

动画将保存到的输出路径。相对于配置文件。

渲染时,完整路径的格式如下:

[output]/[projectName]/[frameNumber].[extension]

静态图像保存到 still 子目录:

[output]/still/[projectName]/[frameNumber].[extension]

bufferedAssets​

  • 类型: RegExp | false
  • 默认值: /\.(wav|ogg)$/

定义哪些资产应该在发送到浏览器之前进行缓冲。

直接从驱动器流式传输较大的资产可能会导致与其他应用程序的问题。例如,如果在项目中使用了音频文件,Adobe Audition 将将其视为"被另一个应用程序使用"并拒绝覆盖它。

缓冲的资产首先加载到内存,然后从那里流式传输。这使得原始文件保持打开状态以进行修改,热模块替换仍然有效。

editor​

  • 类型: string
  • 默认值: @motion-canvas/ui

编辑器包的导入路径。

此选项可用于开发/使用与官方编辑器不同的编辑器。路径将使用 Node.js 模块解析规则进行解析。它应该指向包含以下文件的目录:

  • editor.html - 编辑器的 HTML 模板。
  • styles.css - 编辑器样式。
  • main.js - 导出必要工厂函数的模块。

main.js 应该导出以下函数:

  • editor - 接收项目工厂作为其第一个参数并创建用户界面。
  • index - 接收所有项目的列表作为其第一个参数并创建用于选择项目的初始页面。

proxy​

  • 类型: boolean | MotionCanvasCorsProxyOptions
  • 默认值: false

用于远程源的代理配置。

这会将配置传递给 Motion Canvas 的代理。代理默认禁用。您可以传递 true 或配置对象来启用它。

  • allowedMimeTypes?: string[] - 设置默认允许哪些类型的资源。右侧支持通配符。传递空数组以允许所有类型的资源,尽管不建议这样做。默认为 ["image/*", "video/*"]。
  • allowListHosts?: string[] - 设置允许哪些主机。请注意,主机是第一个 / 左侧的所有内容,以及协议 https:// 右侧的所有内容。默认不使用 AllowList,尽管您应该考虑只设置相关主机。