cubic-bezier()
三次贝塞尔曲线
模拟抛物线
cubic-bezier(0, V, 1, V)
当 V 的值很大，并且元素的初始状态和最终状态非常接近（或几乎相等，但是不能相等），此时可以模拟抛物线
数学公式
P = (1−t)³P0 + 3(1−t)²tP1 + 3(1−t)t²P2 + t³P3
每个点的定义如下
- P0 = (0,0)
- P1 = (0,V)
- P2 = (1,V)
- P3 = (1,1)
X(t) = 3(1−t)t² + t³ = 3t² - 2t³
Y(t) = 3(1−t)²tV +3(1−t)t²V + t³ = t³ - 3Vt² + 3Vt
v 是最大值，t 在 [0,1] 范围内
- 求导：
Y'(t) = 3t² - 6Vt + 3V - 结果：
t = V - sqrt(V² - V)
当 v 是一个大值时，t = 0.5，所以 Y(0.5) = Max 和 X(0.5) = 0.5，意味着将在动画的中点达到最大值，符合抛物线
模拟正弦曲线
数学公式
cubic-bezier(0.5, V, 0.5, -V)
X(t) = 3/2(1−t)²t + 3/2(1−t)t² + t³ = (3/2)t - (3/2)t² + t³
Y(t) = 3(1−t)²tV - 3(1−t)t²V + t³ = (6V + 1)t³ - 9Vt² + 3Vt
- 求导：
Y'(t) = 3(6V + 1)t² - 18Vt + 3V = 0 - 结果：
t' = (3V + sqrt(3V² - V))/(6V + 1)t''= (3V - sqrt(3V² - V))/(6V + 1)
对于大值 v，t' = 0.211，t'' = 0.789，所以 Y(0.211) = Max，Y(0.789) = Min，X(0.211) = 0.26，X(0.789) = 0.74，意味着将在 26% 的时间达到最大值，在 74% 的时间达到最小值