重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
motion-canvas by apoorvlathey/motion-canvas-skills
npx skills add https://github.com/apoorvlathey/motion-canvas-skills --skill motion-canvas使用生成器函数以编程方式创建动画视频的 TypeScript 库。
npm init @motion-canvas@latest # 创建新项目
npm install && npm start # 在 localhost:9000 启动开发服务器
项目结构:
my-project/
├── src/
│ ├── project.ts # 主项目配置
│ └── scenes/ # 动画场景
├── vite.config.ts
└── package.json
// src/project.ts
import {makeProject} from '@motion-canvas/core';
import scene1 from './scenes/scene1?scene'; // 注意:需要 ?scene 后缀
export default makeProject({
scenes: [scene1],
// audio: audioFile, // 可选:将动画与画外音同步
});
场景使用生成器函数 - yield* 暂停以渲染帧:
import {makeScene2D, Circle, Rect, Txt} from '@motion-canvas/2d';
import {createRef, all, waitFor, waitUntil} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
const circle = createRef<Circle>();
view.add(<Circle ref={circle} size={100} fill="#e13238" />);
yield* circle().position.x(300, 1); // 在 1 秒内向右移动
yield* waitFor(0.5); // 暂停 0.5 秒
yield* circle().position.x(0, 1); // 移回原位
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// 形状
<Circle size={100} fill="#e13238" />
<Rect width={200} height={100} fill="blue" radius={10} />
<Line points={[[0,0], [100,100]]} stroke="white" lineWidth={4} />
// 文本
<Txt text="Hello" fontSize={48} fill="white" fontFamily="Arial" />
// 媒体
<Img src={imagePath} width={400} />
<Video ref={videoRef} src={videoPath} />
// 带语法高亮的代码块
<Code code={`const x = 1;`} fontSize={24} />
存储节点引用以进行动画处理:
const circle = createRef<Circle>();
view.add(<Circle ref={circle} />);
yield* circle().scale(2, 1); // 使用 () 调用以访问节点
const radius = createSignal(3);
const area = createSignal(() => Math.PI * radius() * radius()); // 计算值
// 动画化信号
yield* radius(5, 2); // 在 2 秒内从 3 变为 5
// area() 会自动更新
顺序:
yield* animation1();
yield* animation2();
并行:
yield* all(
circle().position(100, 1),
circle().fill('red', 1),
);
交错:
yield* sequence(0.1, anim1(), anim2(), anim3()); // 每个动画之间延迟 0.1 秒
循环:
yield* loop(5, i => circle().rotation(360, 1));
yield* waitUntil('intro-end'); // 暂停直到编辑器时间线中的标记点
yield* circle().scale(2, useDuration('grow')); // 使用时间线中的持续时间
<Layout layout direction="row" gap={20} alignItems="center">
<Circle size={50} />
<Rect width={100} height={50} />
</Layout>
yield* slideTransition(Direction.Left);
yield* fadeTransition(0.5);
yield* zoomInTransition();
const codeRef = createRef<Code>();
view.add(<Code ref={codeRef} code={initialCode} />);
yield* codeRef().code('new code', 1); // 替换全部
yield* codeRef().code.replace(range, 'replacement', 1); // 替换范围
yield* codeRef().selection(codeRef().findFirstRange('text'), 0.5); // 高亮显示
import {easeInOutCubic, easeOutBack, linear} from '@motion-canvas/core';
yield* node().scale(2, 1, easeOutBack); // 过冲效果
在编辑器 UI 中点击 RENDER。在视频设置选项卡中配置:
每周安装量
41
代码仓库
GitHub 星标数
1
首次出现
2026年1月26日
安全审计
安装于
codex30
opencode29
gemini-cli28
claude-code28
cursor26
github-copilot23
TypeScript library for creating animated videos programmatically using generator functions.
npm init @motion-canvas@latest # Create new project
npm install && npm start # Run dev server at localhost:9000
Project structure:
my-project/
├── src/
│ ├── project.ts # Main project config
│ └── scenes/ # Animation scenes
├── vite.config.ts
└── package.json
// src/project.ts
import {makeProject} from '@motion-canvas/core';
import scene1 from './scenes/scene1?scene'; // Note: ?scene suffix required
export default makeProject({
scenes: [scene1],
// audio: audioFile, // Optional: sync animations to voiceover
});
Scenes use generator functions - yield* pauses to render frames:
import {makeScene2D, Circle, Rect, Txt} from '@motion-canvas/2d';
import {createRef, all, waitFor, waitUntil} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
const circle = createRef<Circle>();
view.add(<Circle ref={circle} size={100} fill="#e13238" />);
yield* circle().position.x(300, 1); // Move right over 1 second
yield* waitFor(0.5); // Pause 0.5 seconds
yield* circle().position.x(0, 1); // Move back
});
// Shapes
<Circle size={100} fill="#e13238" />
<Rect width={200} height={100} fill="blue" radius={10} />
<Line points={[[0,0], [100,100]]} stroke="white" lineWidth={4} />
// Text
<Txt text="Hello" fontSize={48} fill="white" fontFamily="Arial" />
// Media
<Img src={imagePath} width={400} />
<Video ref={videoRef} src={videoPath} />
// Code blocks with syntax highlighting
<Code code={`const x = 1;`} fontSize={24} />
Store node references for animation:
const circle = createRef<Circle>();
view.add(<Circle ref={circle} />);
yield* circle().scale(2, 1); // Call with () to access node
const radius = createSignal(3);
const area = createSignal(() => Math.PI * radius() * radius()); // Computed
// Animate signal
yield* radius(5, 2); // Change from 3 to 5 over 2 seconds
// area() automatically updates
Sequential:
yield* animation1();
yield* animation2();
Parallel:
yield* all(
circle().position(100, 1),
circle().fill('red', 1),
);
Staggered:
yield* sequence(0.1, anim1(), anim2(), anim3()); // 0.1s delay between each
Looping:
yield* loop(5, i => circle().rotation(360, 1));
yield* waitUntil('intro-end'); // Pause until marker in editor timeline
yield* circle().scale(2, useDuration('grow')); // Duration from timeline
<Layout layout direction="row" gap={20} alignItems="center">
<Circle size={50} />
<Rect width={100} height={50} />
</Layout>
yield* slideTransition(Direction.Left);
yield* fadeTransition(0.5);
yield* zoomInTransition();
const codeRef = createRef<Code>();
view.add(<Code ref={codeRef} code={initialCode} />);
yield* codeRef().code('new code', 1); // Replace all
yield* codeRef().code.replace(range, 'replacement', 1); // Replace range
yield* codeRef().selection(codeRef().findFirstRange('text'), 0.5); // Highlight
import {easeInOutCubic, easeOutBack, linear} from '@motion-canvas/core';
yield* node().scale(2, 1, easeOutBack); // Overshoot effect
Click RENDER in editor UI. Configure in Video Settings tab:
Weekly Installs
41
Repository
GitHub Stars
1
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex30
opencode29
gemini-cli28
claude-code28
cursor26
github-copilot23
MCP图像生成技能:使用Gemini AI为营销、UI设计、演示文稿创建高质量图像
7,600 周安装