CSS3 timing-function 贝塞尔曲线_linear 贝塞尔曲线 function

作者：从前慢现在也慢 | 2024-03-18 23:22:56

踩

linear 贝塞尔曲线 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/貝茲曲線

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/266123