lottie-bodymovin

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Lottie Animation Principles

Lottie动画原则

Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations.

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

1. Squash and Stretch

1. 挤压与拉伸

In After Effects before export:

Animate Scale X and Y inversely

Use expression:

s = transform.scale[1]; [100 + (100-s), s]

javascript

// Control at runtime
lottie.setSpeed(1.5); // affect squash timing

在导出前的After Effects中：

反向为Scale X和Scale Y设置动画

使用表达式：

s = transform.scale[1]; [100 + (100-s), s]

javascript

// 运行时控制
lottie.setSpeed(1.5); // 影响挤压时序

2. Anticipation

2. 预备动作

Structure your AE composition:

Frames 0-10: Wind-up pose
Frames 10-40: Main action
Frames 40-50: Settle

javascript

// Play anticipation segment
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);

规划你的AE合成：

第0-10帧：预备姿势
第10-40帧：主要动作
第40-50帧：收尾

javascript

// 播放预备动作片段
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);

3. Staging

3. 舞台布局

javascript

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

javascript

// 层叠多个Lottie动画
<div className="scene">
  <Lottie animationData={background} style={{ opacity: 0.6 }} />
  <Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键姿势动画

Pose to pose in AE:

Set keyframes at key poses
Let AE interpolate between
Use Easy Ease for smoothing

javascript

// Jump to specific poses
anim.goToAndStop(25, true); // frame 25

在AE中使用关键姿势动画：

在关键姿势处设置关键帧
让AE自动插值过渡
使用Easy Ease进行平滑处理

javascript

// 跳转到特定姿势
anim.goToAndStop(25, true); // 第25帧

5. Follow Through and Overlapping Action

5. 跟随动作与重叠动作

In After Effects:

Offset child layer keyframes by 2-4 frames
Use parenting with delayed expressions

thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)

在After Effects中：

将子图层关键帧偏移2-4帧
使用带延迟表达式的父子关系

thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)

6. Slow In and Slow Out

6. 缓入缓出

AE Keyframe settings:

Select keyframes > Easy Ease (F9)
Use Graph Editor to adjust curves
Bezier handles control acceleration

javascript

// Adjust playback speed dynamically
anim.setSpeed(0.5); // slower
anim.setSpeed(2); // faster

AE关键帧设置：

选中关键帧 > 应用Easy Ease（快捷键F9）
使用曲线编辑器调整曲线
贝塞尔手柄控制加速度

javascript

// 动态调整播放速度
anim.setSpeed(0.5); // 慢速
anim.setSpeed(2); // 快速

7. Arc

7. 弧线运动

In After Effects:

Use motion paths (position property)
Convert keyframes to Bezier
Pull handles to create arcs
Or use "Auto-Orient to Path"

在After Effects中：

使用运动路径（位置属性）
将关键帧转换为贝塞尔曲线
拖动手柄创建弧线
或使用“自动朝向路径”功能

8. Secondary Action

8. 次要动作

javascript

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

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

javascript

// 触发次要动画
mainAnim.addEventListener('complete', () => {
  secondaryAnim.play();
});

// 或与帧同步
mainAnim.addEventListener('enterFrame', (e) => {
  if (e.currentTime > 15) particleAnim.play();
});

9. Timing

9. 时序控制

javascript

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

javascript

anim.setSpeed(0.5);  // 半速 - 戏剧化效果
anim.setSpeed(1);    // 正常速度
anim.setSpeed(2);    // 双倍速 - 明快效果

// 或在AE导出时控制帧率
// 24fps = 电影感, 30fps = 流畅, 60fps = 丝滑

10. Exaggeration

10. 夸张表现

In After Effects:

Push scale beyond 100% (120-150%)
Overshoot rotation
Use Overshoot expression

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中：

将缩放比例设置为100%以上（120-150%）
过度旋转
使用过冲表达式

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. Solid Drawing

11. 扎实造型

In After Effects:

Use 3D layers
Apply perspective camera
Animate Z position and rotation
Use depth of field

在After Effects中：

使用3D图层
应用透视摄像机
为Z轴位置和旋转设置动画
使用景深效果

12. Appeal

12. 吸引力

Design principles in AE:

Smooth curves over sharp angles
Consistent timing patterns
Pleasing color palette
Clean vector shapes

javascript

// React Lottie with hover
<Lottie
  animationData={data}
  onMouseEnter={() => anim.setDirection(1)}
  onMouseLeave={() => anim.setDirection(-1)}
/>

AE中的设计原则：

优先使用平滑曲线而非尖锐角度
保持一致的时序模式
采用舒适的调色板
使用简洁的矢量图形

javascript

// 带hover效果的React Lottie
<Lottie
  animationData={data}
  onMouseEnter={() => anim.setDirection(1)}
  onMouseLeave={() => anim.setDirection(-1)}
/>

Lottie Implementation

Lottie实现示例

javascript

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

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

javascript

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

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

Key Lottie Features

Lottie核心功能

```
playSegments([start, end])
```
- Play frame range
```
setSpeed(n)
```
- Control timing
```
setDirection(1/-1)
```
- Forward/reverse
```
goToAndStop(frame)
```
- Pose control
```
addEventListener
```
- Frame events
Interactivity via
```
lottie-interactivity
```

```
playSegments([start, end])
```
- 播放帧范围
```
setSpeed(n)
```
- 控制时序
```
setDirection(1/-1)
```
- 正放/倒放
```
goToAndStop(frame)
```
- 姿势控制
```
addEventListener
```
- 帧事件监听
通过
```
lottie-interactivity
```
实现交互性