timing-function
timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效,有多种特效展示。这里得涉及到一个学术性的话题:貝茲曲線。W3C给出的一张曲线图。
cubic-bezier即为貝茲曲線中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。
cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
__________________________________________________________________________________________________
贝塞尔曲线
1、线性曲线
|
线性贝塞尔曲线演示动画,t in [0,1] |
2、二次曲线
为建构二次贝塞尔曲线,可以中介点
Q
0
和
Q
1
作为由0至1的
t
:
- 由P0至P1的连续点Q0,描述一条线性贝塞尔曲线。
- 由P1至P2的连续点Q1,描述一条线性贝塞尔曲线。
- 由Q0至Q1的连续点B(t),描述一条二次贝塞尔曲线。
二次贝塞尔曲线演示动画,
t
in [0,1]
3、高阶曲线
为建构高阶曲线,便需要相应更多的中介点。对于三次曲线,可由线性贝塞尔曲线描述的中介点
Q
0
、
Q
1
、
Q
2
,和由二次曲线描述的点
R
0
、
R
1
所建构:
| | |
三次贝塞尔曲线的结构 | | 三次贝塞尔曲线演示动画,t in [0,1] |
对于四次曲线,可由线性贝塞尔曲线描述的中介点
Q
0
、
Q
1
、
Q
2
、
Q
3
,由二次贝塞尔曲线描述的点
R
0
、
R
1
、
R
2
,和由三次贝塞尔曲线描述的点
S
0
、
S
1
所建构:
| | |
四次贝塞尔曲线的结构 | | 四次贝塞尔曲线演示动画,t in [0,1] |