motion-design 是做什么的？
应用动效设计原则，创建情感驱动、技术可靠的动画和过渡效果。提供为UI适配的时序、缓动、编排和迪士尼动画原则。适用于创建动画、过渡、微交互、加载状态、页面过渡、滚动触发效果或任何动效工作。可与CSS、Framer Motion、GSAP、Lottie、Spring或任何动画系统配合使用。
核心原则
时序（Timing）
- 控制动画的持续时间和节奏。
- 快速动画（100-300ms）适合微交互，慢速动画（300-500ms）适合页面过渡。
- 示例：
transition: all 0.2s ease;
缓动（Easing）
- 定义动画的加速与减速曲线，决定运动质感。
- 常用缓动函数：
ease-in-out、cubic-bezier()、弹簧效果。 - 示例：
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
编排（Choreography）
- 协调多个元素的动画顺序与舞台调度。
- 使用延迟、交错和分层效果创建视觉叙事。
- 示例：列表项依次出现时使用
staggerDelay: 0.1。
迪士尼动画原则适配UI
- 挤压与拉伸（Squash & Stretch）：赋予对象弹性与质量感，适合按钮按压或卡片弹出。
- 预备动作（Anticipation）：在主要动作前加小动作作为提示，例如按钮模糊或缩放。
- 跟随与重叠动作（Follow-through & Overlapping Action）：让主元素带动次元素，如导航菜单的“惯性”效果。
平台支持
- CSS：标准
transition和animation属性。 - Framer Motion：React动画库，支持声明式动画、手势和编排。
- GSAP：高性能JavaScript动画库，支持时间轴和复杂序列。
- Lottie：基于Bodymovin的矢量动画，适合复杂图形动画。
- Spring：自然物理驱动的动画系统，常用于React Native和Framer。
使用场景
- 微交互（按钮、切换、悬停效果）
- 加载状态（骨架屏、旋转器、进度条）
- 页面过渡（进入/退出动画、路由切换）
- 滚动触发效果（滚动进退、视差、渐入）
- 任何需要动效的工作
示例：实现一个带缓动的按钮动画
.button {
transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55),
background-color 0.15s ease;
}
.button:hover {
transform: scale(1.08);
}