本技能聚焦于在 React 应用中使用 Framer Motion 实现迪士尼的 12 项动画原则，并给出可直接参考的声明式代码示例。
用途
用于在 React 项目中应用经典动画原则，借助 Framer Motion 的声明式 React API，为界面过渡、交互动效和元素运动提供符合动画规律的实现方式。
主要能力
资料按 12 项动画原则逐条展示实现方式：
- 挤压与拉伸（Squash and Stretch）：通过 animate 同时控制 scaleX 与 scaleY 的关键帧，并使用 transition 的 times 指定时间分布。
- 预备（Anticipation）：使用 variants 定义 idle、anticipate、jump 等命名状态，并通过 animate 数组与 times 串联动作。
- 布局（Staging）：对背景元素设置 blur 与 opacity，对主体元素设置 scale 与 zIndex，以区分视觉层次。
- 顺画法（Straight Ahead / Pose to Pose）：用数组形式为 x、y 设置关键帧，配合 easeInOut 过渡。
- 跟随与重叠动作（Follow Through and Overlapping Action）：父元素与子元素分别设置不同的 delay 与 duration，模拟头发、披风等部件的滞后。
- 缓入缓出（Slow In and Slow Out）：使用 cubic-bezier 数组或 easeIn、easeOut、easeInOut。
- 弧线（Arc）：同时为 x 与 y 设置关键帧，形成弧形运动轨迹。
- 次要动作（Secondary Action）：在 whileHover、whileTap 的基础上，为内部图标添加旋转的关键帧动画。
- 时间控制（Timing）：以对象集中定义 fast、normal、slow、spring 等时长与弹簧参数。
- 夸张（Exaggeration）：使用 spring 类型并设置较低 damping，产生过冲效果。
- 立体感（Solid Drawing）：通过 perspective 样式与 rotateX、rotateY 实现三维感。
- 吸引力（Appeal）：在 whileHover 中组合 scale 与 boxShadow，并配合 transition。
此外还包含 Stagger Children 示例，通过 variants 中的 staggerChildren 让列表项依次出现。
使用方式
资料以 JSX 代码片段说明用法，核心围绕以下 Framer Motion 特性：
- animate：目标状态。
- variants：命名动画状态。
- whileHover / whileTap：手势动画。
- transition：时间与缓动。
- AnimatePresence：退出动画。
- useAnimation：程序化控制。
- layout：自动动画化布局变化。
代码通过 motion.div、motion.span、motion.button、motion.ul、motion.li 等组件书写，属性值保持与资料一致。
适用场景
适合需要在 React 界面中实现富有表现力的过渡与交互效果、并希望遵循经典动画原则的场景，例如按钮反馈、列表入场、元素跳跃、三维翻转与悬停强调等。
限制
资料未提供完整的项目配置、依赖安装命令、版本要求、浏览器兼容性、性能注意事项、无障碍处理方式或测试方案，这些内容暂未提供。