轩枫阁

首页 / 移动前端 / CSS3 / cubic-bezier贝塞尔曲线CSS3动画工具

cubic-bezier贝塞尔曲线CSS3动画工具

前言

本文将解释,何为贝塞尔曲线,及其如何运用在动画中。

工具及应用

这里给出两个在线动画调试工具。

cubic-bezier还是比较少用到,PC端中,有浏览器不兼容。但是手机端中,可以使用并带来炫酷的动画及体验。

贝塞尔曲线

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋。

css3-transition

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]。

而在CSS3中,常用的几个动画效果,用cubic-bezier表示分别为:

贝塞尔曲线进阶

1、线性曲线

1

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

2、二次曲线

为建构二次贝塞尔曲线,可以中介点Q0Q1作为由0至1的t

  • P0P1的连续点Q0,描述一条线性贝塞尔曲线。
  • P1P2的连续点Q1,描述一条线性贝塞尔曲线。
  • Q0Q1的连续点Bt),描述一条二次贝塞尔曲线。

2

三次贝塞尔曲线的结构

 

2

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

3、高阶曲线

为建构高阶曲线,便需要相应更多的中介点。对于三次曲线,可由线性贝塞尔曲线描述的中介点Q0Q1Q2,和由二次曲线描述的点R0R1所建构:

3

三次贝塞尔曲线的结构

 

3

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

 

对于四次曲线,可由线性贝塞尔曲线描述的中介点Q0Q1Q2Q3,由二次贝塞尔曲线描述的点R0R1R2,和由三次贝塞尔曲线描述的点S0S1所建构:

 

4

四次贝塞尔曲线的结构

 

4

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

使用方法

CSS3中,动画属性为transition,常用动画如下:

我们可以通过赋予transition-timing-function不同的值来更换不同的动画,结合cubic-bezier,我们可以做出更多表现的动画。

兼容方案

相比于兼容性不佳的PC端浏览器,一些动画只能用js来实现,而js也有相应的很熟悉的动画库jquery.easeing.js

下面的例子是分别用js及css3实现的效果:http://www.xuanfengge.com/demo/201505/easing/

实现起来也很简单

参考自:candoudou

相关文章

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]