Skip to content

附录:easeType 参数说明

easeType 是用于表示过渡类型的参数,定义了从开始值到结束值之间的变化曲线。每种过渡类型都代表一种特定的时间函数,指定了动画在不同阶段的变化速率,合理使用可以使动画更加自然。

公式定义

easeType名称公式
0Linearf(t)=t
1SineInf(t)=1cos(πt/2)
2SineOutf(t)=sin(πt/2)
3SineInOutf(t)=(1cos(πt))/2
4QuadInf(t)=t2
5QuadOutf(t)=1(t1)2
6QuadInOutf(t)={(2t)2/20t<0.51(2t2)2/20.5t1
7CubicInf(t)=t3
8CubicOutf(t)=1+(t1)3
9CubicInOutf(t)={(2t)3/20t<0.51+(2t2)3/20.5t1
10QuartInf(t)=t4
11QuartOutf(t)=1(t1)4
12QuartInOutf(t)={(2t)4/20t<0.51(2t2)4/20.5t1
13Zerof(t)=0
14Onef(t)=1

函数图像

Easing Function Figure

贝塞尔曲线拟合

easeType 过渡曲线还可以通过三次贝塞尔曲线(Cubic Bezier Curve)来拟合。

scss
cubic-bezier(x1, y1, x2, y2)

以下是使用贝塞尔曲线拟合 easeType 对应曲线所得到的控制点坐标:

easeTypex1 y1 x2 y2均方误差(MSE)
00.289124 0.289124 0.621155 0.6211554.23345×1033
10.361152 -0.000387 0.673735 0.4872031.96433×1010
20.326265 0.512797 0.638848 1.0003871.96433×1010
30.362576 -0.001826 0.637424 1.0018262.65746×109
40.333620 0.000000 0.666953 0.3339061.19059×1014
50.333047 0.666094 0.666380 1.0000001.19059×1014
60.476190 0.035342 0.523810 0.9646584.16985×106
70.333333 0.000000 0.666667 0.0000008.44156×1015
80.333333 1.000000 0.666667 1.0000008.44156×1015
90.618693 -0.047936 0.381307 1.0479362.15811×106
100.436495 0.005839 0.731335 -0.0708023.84640×108
110.268665 1.070802 0.563505 0.9941613.84640×108
120.708489 -0.096416 0.291511 1.0964161.18139×105
131.000000 0.199702 1.000000 -0.6660653.01598×103
140.000000 1.666065 0.000000 0.8002982.77184×103

CC-BY-NC-4.0 Licensed