mcpField
L
lottie-bodymovin

lottie-bodymovin

github.com/dylantarre设计与 UI134612 次安装43 周前更新
代码仓库

关于 lottie-bodymovin

面向使用 After Effects 和 Lottie 的动画制作者，说明如何用矢量动画落实迪士尼 12 条动画原则。内容结合关键帧制作方法与运行时播放控制。

主要功能

  1. 01涵盖 12 条动画原则
  2. 02说明 After Effects 关键帧方法
  3. 03控制片段、速度和播放方向
  4. 04通过事件联动次要动画

适用场景

  1. 01制作带预备动作和收尾的动画
  2. 02按片段或帧控制 Lottie 播放
  3. 03让粒子动画响应主动画事件

安装

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

$npx skills add https://github.com/dylantarre/animation-principles --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