motion-canvas README

The project's README from github.com/motion-canvas/motion-canvas. As one markdown file: README.md.


Motion Canvas logo

published with lerna powered by vite npm package version discord


Motion Canvas

Motion Canvas is two things:

It's a specialized tool designed to create informative vector animations and synchronize them with voice-overs.

Aside from providing the preview, the editor allows you to edit certain aspects of the animation which could otherwise be tedious.

Using Motion Canvas

Check out our getting started guide to learn how to use Motion Canvas.

Developing Motion Canvas locally

The project is maintained as one monorepo containing the following packages:

Name Description
2d The default renderer for 2D motion graphics
core All logic related to running and rendering animations.
create A package for bootstrapping new projects.
docs Our documentation website.
e2e End-to-end tests.
examples Animation examples used in documentation.
internal Internal helpers used for building the packages.
player A custom element for displaying animations in a browser.
template A template project included for developer's convenience.
ui The user interface used for editing.
vite-plugin A plugin for Vite used for developing and bundling animations.

After cloning the repo, run npm install in the root of the project to install all necessary dependencies. Then run npx lerna run build to build all the packages.

Developing Editor

When developing the editor, run the following command:

npm run template:dev

It will start a vite server that watches the core, 2d, ui, and vite-plugin packages. The template package itself contains a simple Motion Canvas project that can be used during development.

Developing Player

To develop the player, first build the template: npm run template:build. Then, start npm run player:dev.

Installing a local version of Motion Canvas in a project

It can be useful to install a local version of Motion Canvas in a standalone project. For example, when you want to use your own fork with some custom-made features to create your animations.

Let's assume the following project structure:

projects/
├── motion-canvas/ <- your local monorepo
└── my-project/ <- a bootstrapped project
    └── package.json

You can link the local packages from the monorepo by updating the package.json of your project. Simply replace the version with a file: followed by a relative path to the package you want to link:

  "dependencies": {
-   "@motion-canvas/core": "^3.11.0",
+   "@motion-canvas/core": "file:../motion-canvas/packages/core",
    // ...
  },

If you're linking the ui package, you'll also need to modify vite.config.ts to allow vite to load external files:

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

export default defineConfig({
  server: {
    fs: {
      // let it load external files
      strict: false,
    },
  },
  plugins: [motionCanvas()],
});

This is necessary because the editor styles are loaded using the /@fs/ prefix and since the linked ui package is outside the project, vite needs permission to access it.

Then run npm install in to apply the changes and that's it.

You can use the same technique to test out any custom package you're working on.

Contributing

Read through our Contribution Guide to learn how you can help make Motion Canvas better.

motion-canvas (motion-canvas/motion-canvas)

Searching Database…

19.4K ·GitHub
Motion-canvas
这是什么？Motion Canvas 是一款免费开源的工具，用于制作讲解型的矢量动画——你用 TypeScript 编写动画代码，并在实时预览编辑器中查看效果，还可以选择与配音同步。
它是我引入的库，还是我要运行的完整应用？两者都有，打包在一起发布：一个 TypeScript 库，动画用生成器来编写；还有一个编辑器应用，可以在你工作时实时预览这些动画。
我怎么把项目跑起来？按照 Getting Started 指南操作：create 包会搭建一个新项目，开发流程通过 npm 进行，自带的 Vite 插件负责开发服务器和打包。
它对我用什么操作系统有要求吗？没有——它是一套基于 Node/npm 的工作流，预览和播放都在浏览器里进行，所以在 Windows、macOS 和 Linux 上运行效果都一样。
我必须写代码吗，还是可以手绘动画？动画是用 TypeScript 编程实现的——用生成器来描述——所以需要会写代码。编辑器的作用是预览，以及调整那些手动改起来很麻烦的细节。
我怎么把做好的动画展示给别人？player 包是一个自定义元素，可以在浏览器里显示动画，所以做好的动画可以嵌入网页中播放。
它只能做 2D 动画吗？项目自带的渲染器面向 2D 动效图形——这是默认渲染器，所以开箱即用的就是 2D。
为什么用代码做动画，而不是用时间轴编辑器？Motion Canvas 面向的是与配音同步的讲解型矢量动画。用 TypeScript 编写可以让动画效果可编程、易于迭代调整，而编辑器的实时预览则满足了直观检查的需要。
我可以在自己的项目里用 Motion Canvas 的自定义分支吗？可以——在 package.json 中把依赖版本替换成指向你本地包的 file: 路径即可。如果链接了 ui 包，还需要在 vite.config.ts 里让 Vite 允许加载项目之外的文件。
代码仓库里有什么？一个 monorepo：core（动画逻辑）、2d（渲染器）、ui（编辑器界面）、player（浏览器元素），另外还有 create、template、vite-plugin、docs 和 examples 这些包。
What are similar projects?matter-js, threejs-architecture-effects, slidev, zdog, loadersz-core, theatre, react-native-skia, Infographic
Which topics is it in?custom-elements, vector, 2d, presentation, creative-coding, rendering, visualization, editor, vite, real-time, animation, gui
Creator
motion-canvas
Size
10.8 MB
Stars
19.4K
Updated
CommitJul 02Releasev3.17.2Dec 14
Age
4y
Commits · 90 Days