CSS3 timing-function 贝塞尔曲线

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)

      参考资料： http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag

__________________________________________________________________________________________________

       贝塞尔曲线

      1、线性曲线     

线性贝塞尔曲线演示动画，t in [0,1]

      2、二次曲线
       为建构二次贝塞尔曲线，可以中介点 Q ₀ 和 Q ₁ 作为由0至1的 t ：

• 由P₀至P₁的连续点Q₀，描述一条线性贝塞尔曲线。
• 由P₁至P₂的连续点Q₁，描述一条线性贝塞尔曲线。
• 由Q₀至Q₁的连续点B（t），描述一条二次贝塞尔曲线。

    

      

二次贝塞尔曲线演示动画， t  in [0,1]

      3、高阶曲线

       为建构高阶曲线，便需要相应更多的中介点。对于三次曲线，可由线性贝塞尔曲线描述的中介点 Q ₀ 、 Q ₁ 、 Q ₂ ，和由二次曲线描述的点 R ₀ 、 R ₁ 所建构：

三次贝塞尔曲线的结构		三次贝塞尔曲线演示动画，t in [0,1]

       对于四次曲线，可由线性贝塞尔曲线描述的中介点 Q ₀ 、 Q ₁ 、 Q ₂ 、 Q ₃ ，由二次贝塞尔曲线描述的点 R ₀ 、 R ₁ 、 R ₂ ，和由三次贝塞尔曲线描述的点 S ₀ 、 S ₁ 所建构：

四次贝塞尔曲线的结构		四次贝塞尔曲线演示动画，t in [0,1]

       

      参考资料： http://zh.wikipedia.org/wiki/貝茲曲線