可视化并导出缓动曲线，让 CSS 过渡更平滑。
切换 播放 即可用当前曲线重新播放过渡。
创建和调整三次贝塞尔缓动曲线，以支持整个 UI 中一致的运动设计、交互反馈和动画行为。
它从交互式控制点生成有效的三次贝塞尔值。
它帮助比较悬停、进入、退出和注意力动画的缓动配置文件。
它使用可重用的缓动令牌标准化运动计时决策。
控制点
(0.22, 1, 0.36, 1)
快速曲线
(0.2, 0.8, 0.2, 1)
退出曲线
(0.4, 0, 1, 1)
CSS 缓动
过渡计时函数：三次贝塞尔曲线(0.22, 1, 0.36, 1);
Token 映射
--ease-out-expo: 三次贝塞尔曲线(0.16, 1, 0.3, 1);
运动注释
使用互补的进入和退出曲线来平衡交互节奏。
曲线过冲并且感觉不自然
将控制点调整为更接近标准缓出锚点。
不同组件的动画不一致
在整个设计系统中采用共享缓动令牌。
动画感觉迟缓
在适当的情况下将缓动更新与较短的持续时间配对。
退出和进入曲线冲突
为进入和退出定义不同方向的缓动对，而不是复用一条通用曲线。
CSS 三次贝塞尔生成器 应作为交付流程中的快速校验步骤，在提交、发布和交接前都建议执行一次。
多少缓动代币足够？
大多数系统可以与一组紧凑的 4-8 个语义缓动标记配合良好。
一条曲线可以拟合每次交互吗？
通常不能；不同的交互类型受益于定制的缓动。
持续时间和缓动应该一起调整吗？
是的，缓动质量在很大程度上取决于所选的持续时间。
线性是一个好的选择吗？
线性对于持续进展很有用，但对于 UI 反馈动作不太自然。
