motion-canvas/motion-canvas
Fork: 606 Star: 16070 (更新于 2024-10-27 06:46:01)
license: MIT
Language: TypeScript .
Visualize Your Ideas With Code
最后发布版本: v3.17.1 ( 2024-08-18 01:07:25)
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 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.
最近版本更新:(数据更新于 2024-10-10 22:16:47)
2024-08-18 01:07:25 v3.17.1
2024-08-14 03:38:48 v3.17.0
2024-08-13 09:45:50 v3.17.0-alpha.0
2024-05-16 17:11:56 v3.16.0
2024-05-16 17:03:58 v3.16.0-alpha.0
2024-04-02 12:23:21 v3.15.2
2024-03-22 04:53:41 v3.15.1
2024-03-21 17:13:18 v3.15.0
2024-03-21 15:19:27 v3.15.0-alpha.1
2024-03-19 10:52:38 v3.15.0-alpha.0
主题(topics):
animation, presentation, visualization
motion-canvas/motion-canvas同语言 TypeScript最近更新仓库
2024-11-05 17:55:23 langgenius/dify
2024-11-05 17:35:52 siyuan-note/siyuan
2024-11-05 16:59:32 laurent22/joplin
2024-11-05 12:39:27 lobehub/lobe-chat
2024-11-05 11:52:31 RSSNext/Follow
2024-11-05 07:18:03 microsoft/genaiscript