探客时代
Motion Canvas
Visualize Complex Ideas Programmatically
README
Motion Canvas
Motion Canvas is two things:
- A TypeScript library that uses generators to program animations.
- An editor providing a real-time preview of said animations.
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][docs] 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 |
|---|---|
| ------------- | -------------------------------------------------------------- |
| `core` | All |
| `2d` | The |
| `create` | A |
| `docs` | [Our |
| `e2e` | End-to-end |
| `examples` | Animation |
| `player` | A |
| `template` | A |
| `ui` | The |
| `vite-plugin` | A |
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 Core & 2D
When developing the core, start both core:watch and template:serve.
This will pick up any changes you make to the core package, automatically
rebuild the template project and refresh the page.
Similarly, when developing the 2D package, start 2d:watch and
template:serve.
Developing UI
If you want to develop the UI, first build the template project by running:
template:build. Next, start ui:serve.
Developing Player
Like with UI, to develop the player, first build the template: template:build.
Then, start player:serve.
Contributing
Read through our Contribution Guide to learn how you can
help make Motion Canvas better.
[authenticate]:
https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token
[template]: https://github.com/motion-canvas/project-template#using-the-template
[discord]: https://chat.motioncanvas.io
[docs]: https://motioncanvas.io/docs/quickstart
