mcpField
L
lottie-bodymovin

lottie-bodymovin

github.com/calesthio创意与媒体72.7k1.1k 次安装今天更新
代码仓库

关于 lottie-bodymovin

面向使用 Lottie（Bodymovin）制作矢量动画的创作者，整理迪士尼 12 项动画原则及 After Effects 和运行时的实现方法。内容结合关键帧设计与 Lottie 播放控制。

主要功能

  1. 01涵盖 12 项动画原则
  2. 02After Effects 关键帧与曲线建议
  3. 03控制播放速度、方向和片段
  4. 04按帧定位并监听动画事件
  5. 05提供 React Lottie 示例

适用场景

  1. 01设计具有预备动作和缓动的动画
  2. 02控制动画片段及播放时序
  3. 03在 React 项目中呈现 Lottie 动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/calesthio/openmontage --skill lottie-bodymovin

安装后在 Claude Code 中输入/lottie-bodymovin确认已加载。

详细介绍

Lottie 动画原理

使用 Lottie（Bodymovin）为矢量动画实现迪士尼 12 条动画原则。

1. 挤压与拉伸

在 After Effects 中导出前：

  • 反向设置 X 和 Y 缩放动画
  • 使用表达式：s = transform.scale[1]; [100 + (100-s), s]
// Control at runtime
lottie.setSpeed(1.5); // affect squash timing

2. 预备动作

设置 AE 合成：

  1. 第 0-10 帧：蓄力姿势
  2. 第 10-40 帧：主要动作
  3. 第 40-50 帧：收势
// Play anticipation segment
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);

3. 演出布局

// Layer multiple Lotties
<div className="scene">
  <Lottie animationData={background} style={{ opacity: 0.6 }} />
  <Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>

4. 直线运动 / 姿势到姿势

在 AE 中使用姿势到姿势：

  • 在关键姿势处设置关键帧
  • 让 AE 在其间插值
  • 使用 Easy Ease 平滑过渡
// Jump to specific poses
anim.goToAndStop(25, true); // frame 25

5. 跟随与重叠动作

在 After Effects 中：

  • 将子图层的关键帧偏移 2-4 帧
  • 使用带延迟表达式的父子关系
  • thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)

6. 慢入与慢出

AE 关键帧设置：

  • 选择关键帧 > Easy Ease（F9）
  • 使用图表编辑器调整曲线
  • 贝塞尔控制柄控制加速度
// Adjust playback speed dynamically
anim.setSpeed(0.5); // slower
anim.setSpeed(2); // faster

7. 弧线运动

在 After Effects 中：

  • 使用运动路径（位置属性）
  • 将关键帧转换为贝塞尔
  • 拖动控制柄以创建弧线
  • 或使用「自动沿路径定向」

8. 次要动作

// Trigger secondary animation
mainAnim.addEventListener('complete', () => {
  secondaryAnim.play();
});

// Or sync with frame
mainAnim.addEventListener('enterFrame', (e) => {
  if (e.currentTime > 15) particleAnim.play();
});

9. 时间安排

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

10. 夸张

在 After Effects 中：

  • 将缩放推高到 100% 以上（120-150%）
  • 旋转时加入过冲
  • 使用 Overshoot 表达式
  • 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; }

11. 扎实绘图

在 After Effects 中：

  • 使用 3D 图层
  • 应用透视摄像机
  • 为 Z 位置和旋转添加动画
  • 使用景深

12. 吸引力

AE 设计原则：

  • 使用平滑曲线，避免尖锐角度
  • 保持时间节奏一致
  • 采用悦目的配色方案
  • 使用简洁的矢量形状
// React Lottie with hover
<Lottie
  animationData={data}
  onMouseEnter={() => anim.setDirection(1)}
  onMouseLeave={() => anim.setDirection(-1)}
/>

Lottie 实现

import Lottie from 'lottie-react';
import animationData from './animation.json';

<Lottie
  animationData={animationData}
  loop={true}
  autoplay={true}
  style={{ width: 200, height: 200 }}
/>

Lottie 主要功能

  • playSegments([start, end]) - 播放帧范围
  • setSpeed(n) - 控制时间节奏
  • setDirection(1/-1) - 正向/反向播放
  • goToAndStop(frame) - 控制姿势
  • addEventListener - 帧事件
  • 通过 lottie-interactivity 实现交互

评论

支持 Markdown