用途
Motion One 动画原则技能用于在使用 Motion One 这一现代、轻量的动画库时，实现迪士尼的 12 条经典动画原则。它面向需要在网页中制作生动、自然动画效果的开发者，提供可直接参考的代码示例。
主要能力
该技能覆盖迪士尼 12 条动画原则在 Motion One 中的实现方式：
- 挤压与拉伸（Squash and Stretch）：通过 scaleX、scaleY 关键帧实现。
- 预备动作（Anticipation）：使用 timeline 先做反向预备再执行主动作。
- 舞台布局（Staging）：通过模糊背景、突出主体来引导注意力。
- 逐帧与姿势到姿势（Straight Ahead / Pose to Pose）：用多关键帧数组定义运动路径。
- 跟随与重叠动作（Follow Through and Overlapping Action）：用 timeline 的 at 偏移让身体、头发、披风依次跟随。
- 慢入慢出（Slow In and Slow Out）：使用 cubic-bezier 缓动或 spring 弹簧缓动。
- 弧线（Arc）：通过 x、y 关键帧组合或 offsetDistance 沿路径运动。
- 次要动作（Secondary Action）：在主动作之外叠加图标旋转等辅助动画。
- 时间节奏（Timing）：通过 duration 与 spring 参数控制快慢与物理感。
- 夸张（Exaggeration）：用 spring 的过冲效果放大动作幅度。
- 立体感（Solid Drawing）：通过 rotateX、rotateY 配合 CSS perspective 实现三维感。
- 吸引力（Appeal）：通过缩放与阴影变化提升视觉吸引力。
此外还包含交错动画（stagger）、滚动动画（scroll）和进入视口动画（inView）的示例。
使用方式
该技能以代码片段形式提供，使用 Motion One 的 API：
- animate()：单个动画
- timeline()：带 at 定位的序列动画
- stagger()：偏移延迟
- spring()：基于物理的缓动
- scroll()：滚动联动动画
- inView()：Intersection Observer 封装
示例中通过 import { animate } from "motion" 等方式引入，并传入选择器、关键帧对象和配置项。
适用场景
适用于需要在网页中实现迪士尼风格动画原则的前端开发场景，尤其是追求轻量、高性能动画的项目。Motion One 基于 Web Animations API，具备硬件加速特性，包体积约 3kb。
限制
资料未提供该技能的安装方式、版本要求、浏览器兼容性细节、收费信息或平台限制，这些内容暂未提供。