用途
该技能面向需要在 Lottie（Bodymovin）矢量动画中落实迪士尼十二动画原则的场景。动画素材在 After Effects 中制作并导出为 Lottie 格式，运行时通过 Lottie 播放器接口控制播放、速度、方向与帧区间，从而在网页或 React 应用中呈现符合动画原则的效果。
主要能力
资料按十二原则逐条给出实现方式：
- 挤压与拉伸（Squash and Stretch）：在 After Effects 导出前对 Scale X 与 Y 做反向动画，并给出表达式 s = transform.scale[1]; [100 + (100-s), s]；运行时可用 lottie.setSpeed(1.5) 影响挤压节奏。
- 预备动作（Anticipation）：在 AE 合成中划分帧段，如 0-10 帧蓄力、10-40 帧主动作、40-50 帧收尾；运行时用 anim.playSegments([0, 10], true) 播放预备段，再用 setTimeout 在 200 毫秒后播放 anim.playSegments([10, 50], true)。
- 舞台调度（Staging）：通过叠加多个 Lottie 图层实现，示例中背景层设置 opacity 0.6，主体层设置 zIndex 10。
- 逐帧与关键帧（Straight Ahead / Pose to Pose）：在 AE 中于关键姿势设置关键帧并让 AE 插值，使用 Easy Ease 平滑；运行时用 anim.goToAndStop(25, true) 跳到指定帧。
- 跟随与重叠动作（Follow Through and Overlapping Action）：在 AE 中将子层关键帧偏移 2-4 帧，或用父子关系配合延迟表达式 thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)。
- 缓入缓出（Slow In and Slow Out）：在 AE 中选中关键帧按 F9 应用 Easy Ease，用图表编辑器调整曲线，贝塞尔手柄控制加速度；运行时用 anim.setSpeed(0.5) 或 anim.setSpeed(2) 动态调整播放速度。
- 弧线（Arc）：在 AE 中使用位置属性的运动路径，将关键帧转为贝塞尔并拉动手柄形成弧线，或使用 Auto-Orient to Path。
- 次要动作（Secondary Action）：通过事件触发，如 mainAnim.addEventListener('complete', () => { secondaryAnim.play(); })，或在 enterFrame 事件中判断 e.currentTime > 15 时播放粒子动画。
- 时间节奏（Timing）：用 anim.setSpeed(0.5) 半速、1 常速、2 双倍速控制节奏；也可在 AE 导出时控制帧率，24fps 偏电影感、30fps 平滑、60fps 流畅。
- 夸张（Exaggeration）：在 AE 中将缩放推至 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(freqn) / Math.exp(decayn/100); } else { 0; }）。
- 立体造型（Solid Drawing）：在 AE 中使用 3D 图层、透视相机，动画 Z 位置与旋转，并使用景深。
- 吸引力（Appeal）：在 AE 中采用平滑曲线而非尖锐角度、一致的时间模式、悦目的配色与干净的矢量形状；React 示例中通过 onMouseEnter 与 onMouseLeave 切换 anim.setDirection(1) 与 anim.setDirection(-1)。
使用方式
React 中引入 lottie-react 与动画 JSON：
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 实现。
适用场景
适用于需要在网页或 React 应用中播放由 After Effects 导出、经 Bodymovin 转换的 Lottie 矢量动画，并希望动画符合迪士尼十二原则（如预备、跟随、缓入缓出、夸张等）的动画实现工作。
限制
资料未提供该技能的安装命令、依赖版本、浏览器兼容性、性能数据、收费或授权信息，这些内容暂未提供。