用途
该技能面向在 Figma 原型和 Smart Animate 中实现迪士尼十二项动画原则的场景，帮助把动画理论落到 Figma 的具体帧、组件变体与交互设置上。
主要能力
资料按十二项原则逐条给出 Figma 实现方式：
- 挤压与拉伸：创建正常与挤压两个帧，元素缩放为宽 120%、高 80%，用 Smart Animate 连接并采用 Ease In and Out 缓动。示例为帧 1 圆形 100x100，帧 2 圆形 120x80，交互为 Smart Animate、150ms。
- 预备动作：创建待机、蓄力（向动作反方向移动）、动作三个帧，连接顺序为待机 → 蓄力（100ms）→ 动作（After Delay）。
- 舞台调度：背景元素降低不透明度（60-80%）、对非焦点区域应用模糊、放大主体元素、用投影建立深度层级。
- 逐帧与关键帧：在 Figma 中以独立屏幕设计关键帧，用 Smart Animate 连接，由 Figma 在状态间插值，例如姿态 A → 姿态 B → 姿态 C。
- 跟随与重叠动作：为每个元素创建组件变体，跨帧错开状态变化，头发/衣物比身体晚 1-2 帧。示例为帧 1 身体 A、头发 A；帧 2 身体 B、头发 A（延迟）；帧 3 身体 B、头发 B。
- 慢入慢出：Figma 缓动选项包括 Ease In（慢起快终）、Ease Out（快起慢终）、Ease In and Out（两端慢，最自然）、自定义贝塞尔曲线。默认建议多数 UI 交互使用 Ease Out。
- 弧线：沿弧线路径创建多个帧，在曲线关键点放置元素，使用 3 个以上帧以获得平滑弧线，由 Smart Animate 插值路径；也可用组件旋转配合偏移变换原点。
- 次要动作：分层交互，例如主按钮点击缩放，次要图标旋转、阴影扩展。示例为点击时按钮缩放 1.1、Smart Animate、150ms，图标旋转 15°、Smart Animate、100ms，同时开始。
- 时间：给出时长参考，100ms 用于微交互与按钮反馈，200ms 用于标准过渡，300ms 用于页面过渡与模态，400-500ms 用于复杂揭示，800ms 以上用于戏剧性、吸引注意的效果。
- 夸张：超出细微范围，悬停缩放用 1.1x 而非 1.02x，旋转用 15° 而非 5°，位移用 20px 而非 8px，使用 Spring 缓动实现过冲效果。
- 扎实的绘画：通过跨帧一致透视、阴影方向一致、带正确 z 序的分层元素、3D 变换（带透视的旋转）营造深度。
- 吸引力：圆角（友好）、一致间距、平滑颜色过渡、令人满意的交互反馈、清晰视觉层级。
使用方式
Smart Animate 设置要点：跨帧保持图层命名一致，使用组件保证命名一致，匹配图层层级以获得最佳效果，动画前设置变换原点。
交互设置：触发器为 On Click / While Hovering / After Delay，动作为 Navigate To / Smart Animate，动画为 Smart Animate，缓动为 Ease Out，时长为 200ms。
组件变体用于状态：创建 State=Default、State=Hover、State=Active、State=Disabled 等变体，在变体之间使用 Change To 交互配合 Smart Animate。
实用技巧：用 While Hovering 实现可逆动画，用 After Delay 串联序列，帧上设置 Overflow: Hidden 可裁剪动画，用交互组件实现可复用微交互，用演示模式（播放按钮）预览。
适用场景
适合在 Figma 中制作交互动效原型、微交互、状态切换与页面过渡的设计与原型工作。
限制
资料未提供该技能的安装方式、依赖环境、收费与价格信息，也未说明其适用的 Figma 版本或平台限制。