安装npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-easing.json
- 目的
- 比较速度曲线,帮助为响应动作、屏幕内移动和持续运动选择合适节奏。
- 触发
- 由曲线选择或预览重播触发,所有选项共享相同距离和时长。
- 可中断性
- 目标变化时从当前速度衔接;CSS transition 的中断效果需要真实操作验证。
- 减弱动效
- 保留极短状态过渡,移除明显加速、减速和长距离运动。
ease-out缓出开始快、结束慢,适合作为大多数 UI 动效和用户响应动作的默认选择。
ease-in缓入开始慢、结束快,通常应谨慎使用,因为容易显得迟缓。
ease-in-out缓入缓出速度由慢到快再到慢,适合屏幕上已有元素从 A 点移动到 B 点。
linear线性保持恒定速度,适合加载旋转器、跑马灯等持续运动。
cubic-bezier三次贝塞尔由开发者定义的自定义缓动曲线,用于精确控制速度变化。
asymmetric-easing非对称缓动加速与减速速率不同的曲线,通常比对称曲线更有生命力。