Skip to content

附录:easeType 参数说明

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

公式定义

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

贝塞尔曲线拟合

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.333620 0.000000 0.666953 0.3339061.19059×1014
20.333047 0.666094 0.666380 1.0000001.19059×1014
30.476190 0.035342 0.523810 0.9646584.16985×106
40.333333 0.000000 0.666667 0.0000008.44156×1015
50.333333 1.000000 0.666667 1.0000008.44156×1015
60.618693 -0.047936 0.381307 1.0479362.15811×106
70.436495 0.005839 0.731335 -0.0708023.84640×108
80.268665 1.070802 0.563505 0.9941613.84640×108
90.708489 -0.096416 0.291511 1.0964161.18139×105
100.520803 0.011918 0.774259 -0.1172162.68777×107
110.225741 1.117216 0.479197 0.9880822.68777×107
120.769811 -0.128635 0.230189 1.1286353.75674×105
131.000000 0.199702 1.000000 -0.6660653.01598×103
140.000000 1.666065 0.000000 0.8002982.77184×103
150.558337 0.001581 0.999371 0.4517988.13580×109
160.000629 0.548203 0.441663 0.9984198.13576×109
170.326265 0.512797 0.638848 1.0003871.96433×1010
180.361152 -0.000387 0.673735 0.4872031.96433×1010

函数图像

Easing Figure

CC-BY-NC-4.0 Licensed