0

材料设计标准缓和曲线

通过拖动两个控制点来设计自定义 CSS Cubase-bezier() 计时函数,根据线性参考实时预览它,然后复制准备好的值。

拖动橙色手柄 (P1) 和红色手柄 (P2) 来重塑曲线 - 箭头键也可以。根据 CSS 的要求,X 保持在 0 和 1 之间;拖动框上方或下方的手柄可将 y 发送到该范围之外,以实现超调和反弹效果。

你的曲线

线性(用于比较)

处理中... 0%

结果

此页面打开生成器,其中 x1=0.4、y1=0、x2=0.2、y2=1 已加载 - Google 的 Material Design 运动指南中发布的标准缓动曲线。拖动手柄或编辑数字、曲线、实时预览和可复制 CSS 一起更新。

Material Design 将此曲线称为“标准缓动”,并建议将其用于大多数屏幕上的过渡 - 已经可见且在同一屏幕内简单移动、调整大小或淡入淡出的元素。它的形状快速加速,然后缓慢减速到位,这就是为什么如此多的 Android 应用程序和 Material 风格的 Web UI 具有相同的过渡感觉,而没有人注意到它们使用相同的四个数字。

将其直接放入过渡计时功能或动画计时功能中以获得与材质一致的感觉,或将其用作参考点:材质的指南还为进入或离开屏幕的元素定义单独的“减速”和“加速”曲线,这条单一标准曲线并不意味着要取代它。