lottie-bodymovin by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill lottie-bodymovin使用 Lottie(Bodymovin)实现迪士尼所有 12 条动画原则,用于矢量动画。
在导出前的 After Effects 中:
反向动画化 Scale X 和 Y
使用表达式:s = transform.scale[1]; [100 + (100-s), s]
// 运行时控制 lottie.setSpeed(1.5); // 影响挤压时机
构建你的 AE 合成:
// 播放预备动作片段
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);
// 分层多个 Lottie 动画
<div className="scene">
<Lottie animationData={background} style={{ opacity: 0.6 }} />
<Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
在 AE 中使用姿势对应:
在关键姿势处设置关键帧
让 AE 在之间进行插值
使用 Easy Ease 进行平滑处理
// 跳转到特定姿势 anim.goToAndStop(25, true); // 第 25 帧
在 After Effects 中:
thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)AE 关键帧设置:
选择关键帧 > Easy Ease (F9)
使用图表编辑器调整曲线
贝塞尔手柄控制加速度
// 动态调整播放速度 anim.setSpeed(0.5); // 更慢 anim.setSpeed(2); // 更快
在 After Effects 中:
// 触发次要动画
mainAnim.addEventListener('complete', () => {
secondaryAnim.play();
});
// 或与帧同步
mainAnim.addEventListener('enterFrame', (e) => {
if (e.currentTime > 15) particleAnim.play();
});
anim.setSpeed(0.5); // 半速 - 戏剧性
anim.setSpeed(1); // 正常
anim.setSpeed(2); // 双倍速 - 利落
// 或在 AE 导出时控制帧率
// 24fps = 电影感,30fps = 平滑,60fps = 流畅
在 After Effects 中:
amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freq*n) / Math.exp(decay*n/100); } else { 0; }在 After Effects 中:
AE 中的设计原则:
平滑曲线优于尖锐角度
一致的节奏模式
悦目的调色板
干净的矢量形状
// 带悬停效果的 React Lottie <Lottie animationData={data} onMouseEnter={() => anim.setDirection(1)} onMouseLeave={() => anim.setDirection(-1)} />
import Lottie from 'lottie-react';
import animationData from './animation.json';
<Lottie
animationData={animationData}
loop={true}
autoplay={true}
style={{ width: 200, height: 200 }}
/>
playSegments([start, end]) - 播放帧范围setSpeed(n) - 控制节奏setDirection(1/-1) - 正向/反向goToAndStop(frame) - 姿势控制addEventListener - 帧事件lottie-interactivity 实现交互性每周安装量
93
代码仓库
GitHub 星标
20
首次出现
2026年1月24日
安全审计
安装于
codex82
opencode81
gemini-cli78
cursor74
claude-code68
github-copilot67
Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.
In After Effects before export:
Animate Scale X and Y inversely
Use expression: s = transform.scale[1]; [100 + (100-s), s]
// Control at runtime lottie.setSpeed(1.5); // affect squash timing
Structure your AE composition:
// Play anticipation segment
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);
// Layer multiple Lotties
<div className="scene">
<Lottie animationData={background} style={{ opacity: 0.6 }} />
<Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>
Pose to pose in AE:
Set keyframes at key poses
Let AE interpolate between
Use Easy Ease for smoothing
// Jump to specific poses anim.goToAndStop(25, true); // frame 25
In After Effects:
thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)AE Keyframe settings:
Select keyframes > Easy Ease (F9)
Use Graph Editor to adjust curves
Bezier handles control acceleration
// Adjust playback speed dynamically anim.setSpeed(0.5); // slower anim.setSpeed(2); // faster
In After Effects:
// Trigger secondary animation
mainAnim.addEventListener('complete', () => {
secondaryAnim.play();
});
// Or sync with frame
mainAnim.addEventListener('enterFrame', (e) => {
if (e.currentTime > 15) particleAnim.play();
});
anim.setSpeed(0.5); // half speed - dramatic
anim.setSpeed(1); // normal
anim.setSpeed(2); // double speed - snappy
// Or control frame rate in AE export
// 24fps = cinematic, 30fps = smooth, 60fps = fluid
In After Effects:
amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freq*n) / Math.exp(decay*n/100); } else { 0; }In After Effects:
Design principles in AE:
Smooth curves over sharp angles
Consistent timing patterns
Pleasing color palette
Clean vector shapes
// React Lottie with hover <Lottie animationData={data} onMouseEnter={() => anim.setDirection(1)} onMouseLeave={() => anim.setDirection(-1)} />
import Lottie from 'lottie-react';
import animationData from './animation.json';
<Lottie
animationData={animationData}
loop={true}
autoplay={true}
style={{ width: 200, height: 200 }}
/>
playSegments([start, end]) - Play frame rangesetSpeed(n) - Control timingsetDirection(1/-1) - Forward/reversegoToAndStop(frame) - Pose controladdEventListener - Frame eventslottie-interactivityWeekly Installs
93
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex82
opencode81
gemini-cli78
cursor74
claude-code68
github-copilot67
Flutter布局指南:构建响应式UI的约束规则与自适应设计模式
1,200 周安装
ISO 27001信息安全经理:自动化ISMS实施与医疗合规风险评估工具
174 周安装
LLM开发专家指南:大语言模型训练、微调与部署全流程技术详解
92 周安装
FastAPI 生产级模板:Pydantic v2 + SQLAlchemy 异步 + JWT 身份验证
177 周安装
LinkedIn Sales Navigator 免费替代方案:AI 驱动销售线索挖掘与潜在客户列表构建工具
177 周安装
Open Targets Database:药物靶点发现与评估的GraphQL API工具
178 周安装
Neuropixels数据分析工具 - 基于SpikeInterface的神经电生理信号处理与尖峰排序完整工作流
178 周安装