Skip to content

附录:easeType 参数说明 ​

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

公式定义 ​

easeType名称公式
0Linearf(t)=t
1QuadInf(t)=t2
2QuadOutf(t)=1−(t−1)2
3QuadInOutf(t)={(2t)2/20≤t<0.51−(2t−2)2/20.5≤t≤1
4CubicInf(t)=t3
5CubicOutf(t)=1+(t−1)3
6CubicInOutf(t)={(2t)3/20≤t<0.51+(2t−2)3/20.5≤t≤1
7QuartInf(t)=t4
8QuartOutf(t)=1−(t−1)4
9QuartInOutf(t)={(2t)4/20≤t<0.51−(2t−2)4/20.5≤t≤1
10QuintInf(t)=t5
11QuintOutf(t)=1+(t−1)5
12QuintInOutf(t)={(2t)5/20≤t<0.51+(2t−2)5/20.5≤t≤1
13Zerof(t)=0
14Onef(t)=1
15CircInf(t)=1−1−t2
16CircOutf(t)=1−(t−1)2
17SineOutf(t)=sin⁡(πt/2)
18SineInf(t)=1−cos⁡(π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×10−33
10.333620 0.000000 0.666953 0.3339061.19059×10−14
20.333047 0.666094 0.666380 1.0000001.19059×10−14
30.476190 0.035342 0.523810 0.9646584.16985×10−6
40.333333 0.000000 0.666667 0.0000008.44156×10−15
50.333333 1.000000 0.666667 1.0000008.44156×10−15
60.618693 -0.047936 0.381307 1.0479362.15811×10−6
70.436495 0.005839 0.731335 -0.0708023.84640×10−8
80.268665 1.070802 0.563505 0.9941613.84640×10−8
90.708489 -0.096416 0.291511 1.0964161.18139×10−5
100.520803 0.011918 0.774259 -0.1172162.68777×10−7
110.225741 1.117216 0.479197 0.9880822.68777×10−7
120.769811 -0.128635 0.230189 1.1286353.75674×10−5
131.000000 0.199702 1.000000 -0.6660653.01598×10−3
140.000000 1.666065 0.000000 0.8002982.77184×10−3
150.558337 0.001581 0.999371 0.4517988.13580×10−9
160.000629 0.548203 0.441663 0.9984198.13576×10−9
170.326265 0.512797 0.638848 1.0003871.96433×10−10
180.361152 -0.000387 0.673735 0.4872031.96433×10−10

函数图像 ​

Easing Figure

CC-BY-NC-4.0 Licensed