lottie-animator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Lottie Animator - SVG to Motion Graphics

Lottie Animator - 从SVG到动态图形

Professional skill to create advanced Lottie animations from SVGs, eliminating the need for After Effects.

一项可从SVG创建高级Lottie动画的专业技能，无需使用After Effects。

When to Activate

激活场景

Activate this skill when the user requests:

Animate a logo, icon, or SVG graphic
Create motion graphics or animations
Generate Lottie JSON files
Effects: wiggle, bounce, rotate, pulse, fade, scale, morph
Entrance, loop, loading animations, or transitions
Path drawing/reveal animations (Trim Path)
Character animation, walking cycles
Shape morphing (icon transitions)
Replace After Effects workflow

当用户提出以下需求时激活此技能：

为Logo、图标或SVG图形制作动画
创建动态图形或动画
生成Lottie JSON文件
制作特效：摇摆、弹跳、旋转、脉冲、淡入淡出、缩放、变形
入场、循环、加载动画或过渡效果
路径绘制/揭示动画（Trim Path）
角色动画、行走循环
形状变形（图标过渡，如汉堡菜单转叉号）
替代After Effects工作流

Critical: SVG Understanding

关键：SVG理解

Before animating ANY SVG, you MUST understand its path structure.

See: references/svg-path-mastery.md

在为任何SVG制作动画之前，你必须理解其路径结构。

参考：references/svg-path-mastery.md

SVG Path Command Quick Reference

SVG路径命令速查

Command	Description	Lottie Conversion
M x,y	Move to	Starting vertex
L x,y	Line to	Vertex with zero tangents
C cp1 cp2 end	Cubic bezier	Native support
Q ctrl end	Quadratic bezier	Convert to cubic
A rx ry ...	Arc	Split into cubic segments
Z	Close path	Set `c: true`

命令	描述	Lottie 转换方式
M x,y	移动到	起始顶点
L x,y	画线到	切线为零的顶点
C cp1 cp2 end	三次贝塞尔曲线	原生支持
Q ctrl end	二次贝塞尔曲线	转换为三次贝塞尔曲线
A rx ry ...	圆弧	拆分为三次贝塞尔曲线段
Z	闭合路径	设置 `c: true`

Path to Lottie Vertex Formula

路径转Lottie顶点公式

For C x1,y1 x2,y2 x,y from point (px, py):
- Previous vertex outTangent: [x1-px, y1-py]
- Current vertex: [x, y]
- Current vertex inTangent: [x2-x, y2-y]

对于从点(px, py)出发的C x1,y1 x2,y2 x,y：
- 前一个顶点的出切线：[x1-px, y1-py]
- 当前顶点：[x, y]
- 当前顶点的入切线：[x2-x, y2-y]

Main Workflow

主要工作流程

Phase 1: Motion Philosophy (30 seconds)

阶段1：动效理念（30秒）

MANDATORY before any code. Define:

Brand Personality: Professional, playful, elegant, energetic
Emotional Response: Trust, excitement, calm, urgency
Motion Metaphor: Fluid like water, solid like rock, light like air

Example: "Fintech Logo → professional + trust → precise and controlled movement"
Example: "Music App → creative + energy → organic with rhythmic pulses"
Example: "Healthcare → calm + reliable → smooth, slow easings"

必须在编写任何代码前完成。定义：

品牌调性：专业、活泼、优雅、充满活力
情感反馈：信任、兴奋、平静、紧迫感
动效隐喻：如水般流畅、如岩石般稳固、如空气般轻盈

示例："金融科技Logo → 专业+信任 → 精准可控的运动"
示例："音乐应用 → 创意+活力 → 有机且富有节奏感的脉冲"
示例："医疗健康 → 平静+可靠 → 平滑、缓慢的缓动效果"

Phase 2: SVG Deep Analysis

阶段2：SVG深度分析

Before animating, thoroughly analyze:

Structure: Elements, groups, paths, viewBox dimensions
Path Complexity: Vertex count, curve types (C, Q, A commands)
Hierarchy: Primary elements vs. secondary details
Animation Opportunities: Independent parts, stroke-based vs fill-based

bash

undefined

制作动画前，需全面分析：

结构：元素、分组、路径、视口尺寸
路径复杂度：顶点数量、曲线类型（C、Q、A命令）
层级：主要元素 vs 次要细节
动画可能性：独立部件、基于描边 vs 基于填充

bash

undefined

Analyze SVG structure

分析SVG结构


**Key Questions**:
- Is it stroke-based? → Consider Trim Path animation
- Multiple paths? → Consider staggered entrance
- Complex shape? → Consider scale/rotate instead of morph
- Icon library (Phosphor/Lucide)? → Usually clean, minimal vertices


**核心问题**:
- 是否为基于描边的图形？→ 考虑使用Trim Path动画
- 是否有多条路径？→ 考虑使用 staggered 入场效果
- 是否为复杂形状？→ 考虑使用缩放/旋转而非变形
- 是否为图标库（Phosphor/Lucide）中的图标？→ 通常路径简洁、顶点数量少

Phase 3: Animation Strategy Selection

阶段3：选择动画策略

Strategy	Best For	Technique
Draw On	Stroke icons, signatures	Trim Path
Pop In	Logos, buttons	Scale + Opacity
Morph	Icon transitions (hamburger→X)	Path keyframes
Stagger	Multiple elements	Delayed start times
Character	People, mascots	Parenting + bone hierarchy
Loader	Progress, spinners	Rotation + Trim Path
Frame-by-Frame	Walk/run cycles, complex characters	ip/op layer switching

Pro Tip: For complex character animations (walk cycles, run cycles), use Frame-by-Frame technique instead of continuous animation. See references/professional-techniques.md

策略	适用场景	技术
绘制显现	描边图标、签名	Trim Path
弹出入场	Logo、按钮	缩放 + 透明度
形状变形	图标过渡（汉堡→叉号）	路径关键帧
stagger 入场	多元素	延迟开始时间
角色动画	人物、吉祥物	父子层级 + 骨骼结构
加载动画	进度条、加载 spinner	旋转 + Trim Path
逐帧动画	行走/跑步循环、复杂角色	ip/op 图层切换

专业提示：对于复杂角色动画（行走循环、跑步循环），使用逐帧动画技术而非连续动画。参考references/professional-techniques.md

Phase 4: Create Lottie JSON

阶段4：创建Lottie JSON

See: references/lottie-structure.md

Base Structure:

json

{
  "v": "5.12.1",
  "fr": 60,
  "ip": 0,
  "op": 120,
  "w": 512,
  "h": 512,
  "nm": "Animation Name",
  "ddd": 0,
  "assets": [],
  "layers": []
}

参考：references/lottie-structure.md

基础结构:

json

{
  "v": "5.12.1",
  "fr": 60,
  "ip": 0,
  "op": 120,
  "w": 512,
  "h": 512,
  "nm": "Animation Name",
  "ddd": 0,
  "assets": [],
  "layers": []
}

Phase 5: Apply Professional Easing

阶段5：应用专业缓动效果

See: references/bezier-easing.md

Use Case	Out Tangent	In Tangent
Entrance	`[0.33, 0]`	`[0.67, 1]`
Exit	`[0.55, 0.055]`	`[0.675, 0.19]`
Loop	`[0.645, 0.045]`	`[0.355, 1]`
Bounce	`[0.34, 1.56]`	`[0.64, 1]`
Spring	`[0.5, 1.5]`	`[0.5, 0.9]`

参考：references/bezier-easing.md

使用场景	出切线	入切线
入场	`[0.33, 0]`	`[0.67, 1]`
退场	`[0.55, 0.055]`	`[0.675, 0.19]`
循环	`[0.645, 0.045]`	`[0.355, 1]`
弹跳	`[0.34, 1.56]`	`[0.64, 1]`
弹簧	`[0.5, 1.5]`	`[0.5, 0.9]`

Phase 6: Validate and Export

阶段6：验证与导出

bash

undefined

bash

undefined

Validate JSON structure

验证JSON结构

python3 -c "import json; json.load(open('animation.json'))"

Preview

预览

echo "Open in: https://lottiefiles.com/preview"

undefined

echo "在以下地址预览: https://lottiefiles.com/preview"

undefined

Shape Modifiers

形状修改器

See: references/shape-modifiers.md

参考：references/shape-modifiers.md

Trim Path (Icon Drawing Animation)

Trim Path（图标绘制动画）

json

{
  "ty": "tm",
  "s": {"a": 0, "k": 0},
  "e": {
    "a": 1,
    "k": [
      {"t": 0, "s": [0], "o": {"x": [0.33], "y": [0]}, "i": {"x": [0.67], "y": [1]}},
      {"t": 45, "s": [100]}
    ]
  },
  "o": {"a": 0, "k": 0},
  "m": 1
}

json

{
  "ty": "tm",
  "s": {"a": 0, "k": 0},
  "e": {
    "a": 1,
    "k": [
      {"t": 0, "s": [0], "o": {"x": [0.33], "y": [0]}, "i": {"x": [0.67], "y": [1]}},
      {"t": 45, "s": [100]}
    ]
  },
  "o": {"a": 0, "k": 0},
  "m": 1
}

Repeater (Radial/Linear Patterns)

Repeater（放射/线性图案）

json

{
  "ty": "rp",
  "c": {"a": 0, "k": 8},
  "tr": {
    "r": {"a": 0, "k": 45},
    "so": {"a": 0, "k": 100},
    "eo": {"a": 0, "k": 30}
  }
}

json

{
  "ty": "rp",
  "c": {"a": 0, "k": 8},
  "tr": {
    "r": {"a": 0, "k": 45},
    "so": {"a": 0, "k": 100},
    "eo": {"a": 0, "k": 30}
  }
}

Offset Path (Glow/Outline Effects)

Offset Path（发光/轮廓效果）

json

{
  "ty": "op",
  "a": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 30, "s": [8]}]},
  "lj": 2
}

json

{
  "ty": "op",
  "a": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 30, "s": [8]}]},
  "lj": 2
}

Advanced Techniques

高级技术

See: references/advanced-animation.md and references/professional-techniques.md

参考：references/advanced-animation.md 和 references/professional-techniques.md

Frame-by-Frame Animation (Professional Technique)

逐帧动画（专业技术）

The most professional technique for complex character animations. Instead of continuous animation, create multiple "poses" that appear/disappear in sequence using

ip

(in point) and

op

(out point).

json

{
  "layers": [
    {"nm": "Pose 1", "ip": 0, "op": 6, "shapes": [/* pose 1 */]},
    {"nm": "Pose 2", "ip": 6, "op": 12, "shapes": [/* pose 2 */]},
    {"nm": "Pose 3", "ip": 12, "op": 18, "shapes": [/* pose 3 */]}
  ]
}

Timing Formula:

Total Frames = Poses × Frames_per_Pose

→

Duration = Total Frames / FPS

When to Use:

Walk/run cycles (each pose is a different leg position)
Complex character animations with drastic shape changes
When morphing produces ugly results
Professional sprite-sheet style animations

这是制作复杂角色动画最专业的技术。无需连续动画，而是创建多个“姿态”，通过

ip

（入点）和

op

（出点）控制其依次显示/隐藏。

json

{
  "layers": [
    {"nm": "Pose 1", "ip": 0, "op": 6, "shapes": [/* 姿态1 */]},
    {"nm": "Pose 2", "ip": 6, "op": 12, "shapes": [/* 姿态2 */]},
    {"nm": "Pose 3", "ip": 12, "op": 18, "shapes": [/* 姿态3 */]}
  ]
}

时间计算公式：

总帧数 = 姿态数 × 每个姿态的帧数

→

时长 = 总帧数 / 帧率

适用场景:

行走/跑步循环（每个姿态对应不同的腿部位置）
复杂角色动画（形状变化大）
变形效果不佳时
专业精灵表风格动画

Layer Parenting (Bone Hierarchy)

图层父子层级（骨骼结构）

Use

parent

property to create hierarchies where moving one layer moves all children.

json

{
  "layers": [
    {"ind": 14, "nm": "Shadow", "ks": {"p": {"a": 0, "k": [340, 195, 0]}}},
    {"ind": 1, "nm": "Head", "parent": 14, "ks": {"p": {"a": 0, "k": [88, -84, 0]}}},
    {"ind": 2, "nm": "Body", "parent": 14, "ks": {"p": {"a": 0, "k": [0, -50, 0]}}}
  ]
}

Key Insight: Child positions are RELATIVE to parent. Moving Shadow moves all children with it.

Professional Parent Strategies:

Shadow as Parent: Move shadow → entire character moves (for walk cycles)
Body as Parent: Limbs and head follow body rotation
Joint as Parent: Upper arm controls forearm and hand rotation

Parent Chain Example:

Shadow (Parent for entire character)
├── Head (child)
├── Body (child)
├── Ear Inner (child)
├── Eye (child)
└── ... 13 total children

使用

parent

属性创建层级结构，移动父图层时所有子图层都会随之移动。

json

{
  "layers": [
    {"ind": 14, "nm": "Shadow", "ks": {"p": {"a": 0, "k": [340, 195, 0]}}},
    {"ind": 1, "nm": "Head", "parent": 14, "ks": {"p": {"a": 0, "k": [88, -84, 0]}}},
    {"ind": 2, "nm": "Body", "parent": 14, "ks": {"p": {"a": 0, "k": [0, -50, 0]}}}
  ]
}

核心要点：子图层的位置是相对父图层的。移动Shadow图层会带动所有子图层一起移动。

专业父子层级策略:

阴影作为父图层：移动阴影 → 整个角色移动（适用于行走循环）
身体作为父图层：四肢和头部跟随身体旋转
关节作为父图层：上臂控制前臂和手部旋转

父子层级示例:

Shadow (整个角色的父图层)
├── Head (子图层)
├── Body (子图层)
├── Ear Inner (子图层)
├── Eye (子图层)
└── ... 共13个子图层

Path Morphing (Same Vertex Count Required)

路径变形（需顶点数量一致）

json

{
  "ty": "sh",
  "ks": {
    "a": 1,
    "k": [
      {"t": 0, "s": [{"c": true, "v": [[0,0], [100,0], [100,100], [0,100]], "i": [...], "o": [...]}]},
      {"t": 30, "s": [{"c": true, "v": [[50,-20], [120,50], [50,120], [-20,50]], "i": [...], "o": [...]}]}
    ]
  }
}

Critical Rule: Both shapes MUST have identical vertex count for smooth morphing.

json

{
  "ty": "sh",
  "ks": {
    "a": 1,
    "k": [
      {"t": 0, "s": [{"c": true, "v": [[0,0], [100,0], [100,100], [0,100]], "i": [...], "o": [...]}]},
      {"t": 30, "s": [{"c": true, "v": [[50,-20], [120,50], [50,120], [-20,50]], "i": [...], "o": [...]}]}
    ]
  }
}

关键规则：两个形状必须拥有相同的顶点数量才能实现平滑变形。

Track Mattes (Masking)

轨道遮罩（蒙版）

json

// Matte layer (defines visible area)
{"ind": 1, "nm": "Matte", "td": 1, "ty": 4, ...}

// Content layer (uses the matte)
{"ind": 2, "nm": "Content", "tt": 1, "ty": 4, ...}

tt Value	Mode
1	Alpha Matte
2	Alpha Inverted
3	Luma Matte
4	Luma Inverted

json

// 遮罩图层（定义可见区域）
{"ind": 1, "nm": "Matte", "td": 1, "ty": 4, ...}

// 内容图层（使用遮罩）
{"ind": 2, "nm": "Content", "tt": 1, "ty": 4, ...}

tt值	模式
1	Alpha遮罩
2	反向Alpha遮罩
3	亮度遮罩
4	反向亮度遮罩

Animation Principles Applied

动画原则应用

1. Anticipation

1. 预备动作

json

"s": {"a": 1, "k": [
  {"t": 0, "s": [100, 100]},
  {"t": 8, "s": [95, 105]},    // Slight crouch
  {"t": 25, "s": [115, 90]},   // Main action
  {"t": 40, "s": [100, 100]}
]}

json

"s": {"a": 1, "k": [
  {"t": 0, "s": [100, 100]},
  {"t": 8, "s": [95, 105]},    // 轻微下蹲
  {"t": 25, "s": [115, 90]},   // 主要动作
  {"t": 40, "s": [100, 100]}
]}

2. Squash & Stretch (Volume Preservation)

2. 挤压与拉伸（保持体积）

json

// X * Y should stay roughly constant
{"t": 0, "s": [100, 100]},   // 10000
{"t": 10, "s": [120, 83]},   // 9960 ≈ preserved
{"t": 20, "s": [85, 118]}    // 10030 ≈ preserved

json

// X * Y应大致保持恒定
{"t": 0, "s": [100, 100]},   // 10000
{"t": 10, "s": [120, 83]},   // 9960 ≈ 保持不变
{"t": 20, "s": [85, 118]}    // 10030 ≈ 保持不变

3. Staggered Timing

3. 错开时间

json

{"ind": 1, "st": 0, "ip": 0},
{"ind": 2, "st": 3, "ip": 3},   // 3 frame delay
{"ind": 3, "st": 6, "ip": 6},   // 6 frame delay
{"ind": 4, "st": 9, "ip": 9}    // 9 frame delay

json

{"ind": 1, "st": 0, "ip": 0},
{"ind": 2, "st": 3, "ip": 3},   // 延迟3帧
{"ind": 3, "st": 6, "ip": 6},   // 延迟6帧
{"ind": 4, "st": 9, "ip": 9}    // 延迟9帧

4. Follow-Through with Overshoot

4. 跟随动作与过冲

json

"r": {"a": 1, "k": [
  {"t": 0, "s": [0]},
  {"t": 15, "s": [95]},    // Overshoot target
  {"t": 25, "s": [88]},    // Settle back
  {"t": 35, "s": [90]}     // Final position
]}

json

"r": {"a": 1, "k": [
  {"t": 0, "s": [0]},
  {"t": 15, "s": [95]},    // 过冲目标位置
  {"t": 25, "s": [88]},    // 回落到目标位置
  {"t": 35, "s": [90]}     // 最终位置
]}

Common Animation Recipes

常见动画模板

Loading Spinner

加载Spinner

json

{
  "shapes": [
    {"ty": "el", "s": {"a": 0, "k": [60, 60]}},
    {"ty": "st", "w": {"a": 0, "k": 4}, "c": {"a": 0, "k": [0.2, 0.5, 1, 1]}, "lc": 2},
    {"ty": "tm", "s": {"a": 0, "k": 0}, "e": {"a": 0, "k": 75},
     "o": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 60, "s": [360]}]}}
  ],
  "ks": {"r": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 120, "s": [360]}]}}
}

json

{
  "shapes": [
    {"ty": "el", "s": {"a": 0, "k": [60, 60]}},
    {"ty": "st", "w": {"a": 0, "k": 4}, "c": {"a": 0, "k": [0.2, 0.5, 1, 1]}, "lc": 2},
    {"ty": "tm", "s": {"a": 0, "k": 0}, "e": {"a": 0, "k": 75},
     "o": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 60, "s": [360]}]}}
  ],
  "ks": {"r": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 120, "s": [360]}]}}
}

Checkmark Draw

对勾绘制动画

json

{
  "shapes": [
    {"ty": "sh", "ks": {"a": 0, "k": {"c": false, "v": [[20,50], [40,70], [80,30]], "i": [[0,0], [0,0], [0,0]], "o": [[0,0], [0,0], [0,0]]}}},
    {"ty": "st", "w": {"a": 0, "k": 6}, "c": {"a": 0, "k": [0.2, 0.8, 0.4, 1]}, "lc": 2, "lj": 2},
    {"ty": "tm", "e": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 30, "s": [100]}]}}
  ]
}

json

{
  "shapes": [
    {"ty": "sh", "ks": {"a": 0, "k": {"c": false, "v": [[20,50], [40,70], [80,30]], "i": [[0,0], [0,0], [0,0]], "o": [[0,0], [0,0], [0,0]]}}},
    {"ty": "st", "w": {"a": 0, "k": 6}, "c": {"a": 0, "k": [0.2, 0.8, 0.4, 1]}, "lc": 2, "lj": 2},
    {"ty": "tm", "e": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 30, "s": [100]}]}}
  ]
}

Heart Beat (Organic)

心跳动效（有机风格）

json

"s": {"a": 1, "k": [
  {"t": 0, "s": [100, 100]},
  {"t": 8, "s": [115, 115]},    // Systole (Lub)
  {"t": 12, "s": [90, 90]},     // Diastole start (Dub)
  {"t": 18, "s": [105, 105]},   // Refill
  {"t": 45, "s": [100, 100]}    // Rest
]}

json

"s": {"a": 1, "k": [
  {"t": 0, "s": [100, 100]},
  {"t": 8, "s": [115, 115]},    // 收缩（第一心音）
  {"t": 12, "s": [90, 90]},     // 舒张开始（第二心音）
  {"t": 18, "s": [105, 105]},   // 充盈
  {"t": 45, "s": [100, 100]}    // 静止
]}

Icon Pop-In with Bounce

图标弹跳弹出入场

json

{
  "ks": {
    "s": {"a": 1, "k": [
      {"t": 0, "s": [0, 0], "o": {"x": [0.34], "y": [1.56]}, "i": {"x": [0.64], "y": [1]}},
      {"t": 18, "s": [110, 110], "o": {"x": [0.33], "y": [0]}, "i": {"x": [0.67], "y": [1]}},
      {"t": 30, "s": [100, 100]}
    ]},
    "o": {"a": 1, "k": [
      {"t": 0, "s": [0]},
      {"t": 12, "s": [100]}
    ]}
  }
}

json

{
  "ks": {
    "s": {"a": 1, "k": [
      {"t": 0, "s": [0, 0], "o": {"x": [0.34], "y": [1.56]}, "i": {"x": [0.64], "y": [1]}},
      {"t": 18, "s": [110, 110], "o": {"x": [0.33], "y": [0]}, "i": {"x": [0.67], "y": [1]}},
      {"t": 30, "s": [100, 100]}
    ]},
    "o": {"a": 1, "k": [
      {"t": 0, "s": [0]},
      {"t": 12, "s": [100]}
    ]}
  }
}

Icon Library Optimization

图标库优化

Phosphor/Lucide Icons

Phosphor/Lucide图标

ViewBox: Usually 256x256 (Phosphor) or 24x24 (Lucide)
Structure: Clean paths, minimal vertices
Strokes:
```
stroke-linecap="round"
```
for Trim Path compatibility
Scale: Match your canvas to viewBox for 1:1

视口：通常为256x256（Phosphor）或24x24（Lucide）
结构：路径简洁、顶点数量少
描边：
```
stroke-linecap="round"
```
以兼容Trim Path
缩放：将画布与视口匹配以实现1:1比例

Recommended Animation Approach

Stroke + Fill Combination (Outline Style)

描边+填充组合（轮廓风格）

For professional character animations, combine stroke (contour) + fill (color) in each shape:

json

{
  "ty": "gr",
  "it": [
    {"ty": "sh", "ks": {...}},
    {"ty": "st", "c": {"a": 0, "k": [0.259, 0.153, 0.141, 1]}, "w": {"a": 0, "k": 1}, "lc": 2, "lj": 2},
    {"ty": "fl", "c": {"a": 0, "k": [0.302, 0.604, 0.816, 1]}},
    {"ty": "tr", ...}
  ]
}

Stroke Properties:

Property	Value	Description
`lc` (lineCap)	1=Butt, 2=Round, 3=Square	Line end style
`lj` (lineJoin)	1=Miter, 2=Round, 3=Bevel	Corner style

Professional Color Palette Example (from Running Cat):

json

{
  "body_fill": [0.302, 0.604, 0.816, 1],
  "outline": [0.259, 0.153, 0.141, 1],
  "eye_white": [0.902, 0.976, 1.0, 1],
  "shadow": [0.608, 0.706, 0.878, 1]
}

对于专业角色动画，在每个形状中组合描边（轮廓）+填充（颜色）：

json

{
  "ty": "gr",
  "it": [
    {"ty": "sh", "ks": {...}},
    {"ty": "st", "c": {"a": 0, "k": [0.259, 0.153, 0.141, 1]}, "w": {"a": 0, "k": 1}, "lc": 2, "lj": 2},
    {"ty": "fl", "c": {"a": 0, "k": [0.302, 0.604, 0.816, 1]}},
    {"ty": "tr", ...}
  ]
}

描边属性:

属性	值	描述
`lc` (lineCap)	1=平头, 2=圆头, 3=方头	线条末端样式
`lj` (lineJoin)	1=斜接, 2=圆角, 3=斜切	拐角样式

专业调色板示例（来自跑步猫动画）:

json

{
  "body_fill": [0.302, 0.604, 0.816, 1],
  "outline": [0.259, 0.153, 0.141, 1],
  "eye_white": [0.902, 0.976, 1.0, 1],
  "shadow": [0.608, 0.706, 0.878, 1]
}

Common Errors

常见错误

Error	Cause	Solution
Non-looping	Last keyframe ≠ first value	Match start/end keyframe values
Stiff movement	No easing curves	Add bezier `i` / `o` tangents
Jerky animation	Keyframes too sparse	Add intermediate keyframes
Morph glitches	Different vertex counts	Add/remove vertices to match
Wrong rotation pivot	Incorrect anchor point	Set `a` to rotation center
Path draws wrong direction	Path not reversed	Use `"d": 3` to reverse
Ugly character animation	Trying to morph complex shapes	Use frame-by-frame instead

错误	原因	解决方案
无法循环	最后一个关键帧与第一个值不匹配	匹配起始和结束关键帧的值
运动生硬	未添加缓动曲线	添加贝塞尔 `i` / `o` 切线
动画卡顿	关键帧过于稀疏	添加中间关键帧
变形故障	顶点数量不同	添加/删除顶点以匹配数量
旋转轴心错误	锚点设置不正确	将 `a` 设置为旋转中心
路径绘制方向错误	路径未反转	使用 `"d": 3` 反转路径
角色动画效果差	尝试变形复杂形状	改用逐帧动画

Performance Guidelines

性能指南

Layers: <15 for complex animations
Vertices: <20 per shape for smooth morphing
Frame Rate: 30fps often sufficient, 60fps for ultra-smooth
Modifiers: Avoid nested repeaters
Effects: Minimize blur/shadow usage
File Size: Target <50KB for icons, <200KB for complex

图层数量：复杂动画不超过15个
顶点数量：每个形状不超过20个以实现平滑变形
帧率：30fps通常足够，60fps用于超平滑效果
修改器：避免嵌套repeater
特效：尽量减少模糊/阴影的使用
文件大小：图标目标<50KB，复杂动画目标<200KB

References

参考资料

SVG Path Mastery - START HERE for SVG understanding
Professional Techniques - Frame-by-frame, parenting, outline style
Lottie JSON Structure
Bezier Curves and Easing
Shape Modifiers
Advanced Animation
SVG to Lottie Conversion
Animation Examples
Official Lottie Documentation

SVG Path Mastery - 从这里开始学习SVG理解
Professional Techniques - 逐帧动画、父子层级、轮廓风格
Lottie JSON Structure
Bezier Curves and Easing
Shape Modifiers
Advanced Animation
SVG to Lottie Conversion
Animation Examples
官方Lottie文档

lottie-animator

Original

Translation

Lottie Animator - SVG to Motion Graphics

Lottie Animator - 从SVG到动态图形

When to Activate

激活场景

Critical: SVG Understanding

关键：SVG理解

SVG Path Command Quick Reference

SVG路径命令速查

Path to Lottie Vertex Formula

路径转Lottie顶点公式

Main Workflow

主要工作流程

Phase 1: Motion Philosophy (30 seconds)

阶段1：动效理念（30秒）

Phase 2: SVG Deep Analysis

阶段2：SVG深度分析

Analyze SVG structure

分析SVG结构

Phase 3: Animation Strategy Selection

阶段3：选择动画策略

Phase 4: Create Lottie JSON

阶段4：创建Lottie JSON

Phase 5: Apply Professional Easing

阶段5：应用专业缓动效果

Phase 6: Validate and Export

阶段6：验证与导出

Validate JSON structure

验证JSON结构

Preview

预览

Shape Modifiers

形状修改器

Trim Path (Icon Drawing Animation)

Trim Path（图标绘制动画）

Repeater (Radial/Linear Patterns)

Repeater（放射/线性图案）

Offset Path (Glow/Outline Effects)

Offset Path（发光/轮廓效果）

Advanced Techniques

高级技术

Frame-by-Frame Animation (Professional Technique)

逐帧动画（专业技术）

Layer Parenting (Bone Hierarchy)

图层父子层级（骨骼结构）

Path Morphing (Same Vertex Count Required)

路径变形（需顶点数量一致）

Track Mattes (Masking)

轨道遮罩（蒙版）

Animation Principles Applied

动画原则应用

1. Anticipation

1. 预备动作

2. Squash & Stretch (Volume Preservation)

2. 挤压与拉伸（保持体积）

3. Staggered Timing

3. 错开时间

4. Follow-Through with Overshoot

4. 跟随动作与过冲

Common Animation Recipes

常见动画模板

Loading Spinner

加载Spinner

Checkmark Draw

对勾绘制动画

Heart Beat (Organic)

心跳动效（有机风格）

Icon Pop-In with Bounce

图标弹跳弹出入场

Icon Library Optimization

图标库优化

Phosphor/Lucide Icons

Phosphor/Lucide图标

Recommended Animation Approach

推荐动画方法

Stroke + Fill Combination (Outline Style)

描边+填充组合（轮廓风格）

Common Errors