用途:把迪士尼十二动画原则映射到浏览器端动效实现,用于 CSS 动画、JavaScript 过渡、React/Vue 动效等前端动画工作。
主要能力:给出各原则的网页实现方式与要点。挤压拉伸用交互态 transform: scale();预备动作在动作前做轻微反向位移;舞台调度用动效层级引导注意力;逐帧与关键帧分别对应 JS 帧动画和 CSS @keyframes;跟随与重叠用子元素错峰动画和弹性缓动;缓入缓出使用 ease-in-out 与 cubic-bezier;弧线用 motion-path 或不同缓动的 X/Y 变换组合;次要动作如阴影、发光响应主动效;时长建议微交互 100-200ms、标准过渡 200-400ms、复杂序列 400-700ms、页面切换 300-500ms;夸张让悬停缩放到 1.05-1.1、错误抖动位移 10-20px;扎实造型保持一致的 transform-origin 与 3D 透视;吸引力以 60fps 和有意为之的动效为目标。标准缓动参考 cubic-bezier(0.4, 0, 0.2, 1),进入用 cubic-bezier(0, 0, 0.2, 1),退出用 cubic-bezier(0.4, 0, 1, 1);UI 动效不用 linear。
用法:按原则对照表选择实现手段,CSS 可预测动画优先使用 @keyframes,动态与物理感动效可用 JavaScript/GSAP;错峰可用递减的 animation-delay。
限制:性能上仅动画 transform 与 opacity 以启用 GPU 加速;will-change 谨慎使用并在动画后移除;需在低性能设备上测试。资料未提供安装命令、收费信息与版本要求。