cubic-bezier贝塞尔曲线CSS3动画工具
前言
本文将解释,何为贝塞尔曲线,及其如何运用在动画中。
工具及应用
这里给出两个在线动画调试工具。
cubic-bezier还是比较少用到,PC端中,有浏览器不兼容。但是手机端中,可以使用并带来炫酷的动画及体验。
贝塞尔曲线
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋。
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
2
3
4
5
|
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
2、二次曲线
为建构二次贝塞尔曲线,可以中介点Q0和Q1作为由0至1的t:
三次贝塞尔曲线的结构
二次贝塞尔曲线演示动画,t
3、高阶曲线
为建构高阶曲线,便需要相应更多的中介点。对于三次曲线,可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2,和由二次曲线描述的点R0、R1所建构:
三次贝塞尔曲线的结构
三次贝塞尔曲线演示动画,t in [0,1]
对于四次曲线,可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2、Q3,由二次贝塞尔曲线描述的点R0、R1、R2,和由三次贝塞尔曲线描述的点S0、S1所建构:
四次贝塞尔曲线的结构
四次贝塞尔曲线演示动画,t in [0,1]
使用方法
CSS3中,动画属性为transition,常用动画如下:
1
2
3
4
|
div
{
-
webkit
-
transition
:
all
600ms
ease
;
transition
:
all
600ms
ease
;
}
|
我们可以通过赋予transition-timing-function不同的值来更换不同的动画,结合cubic-bezier,我们可以做出更多表现的动画。
兼容方案
相比于兼容性不佳的PC端浏览器,一些动画只能用js来实现,而js也有相应的很熟悉的动画库jquery.easeing.js
下面的例子是分别用js及css3实现的效果:
实现起来也很简单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<
!
DOCTYPE
html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>
Document
<
/
title
>
<
script
src
=
"http://cdnjs.gtimg.com/cdnjs/libs/jquery/2.1.1/jquery.js"
>
<
/
script
>
<
script
src
=
"js/jquery.easing.1.3.js"
>
<
/
script
>
<
style
>
*
{
padding
:
0
;
margin
:
0
;
}
.
demo
{
position
:
absolute
;
width
:
40px
;
height
:
40px
;
background
:
#39c;
margin
:
100px
;
left
:
0
;
}
.
demo1
{
top
:
10px
;
}
.
demo2
{
top
:
100px
;
-
webkit
-
transition
:
all
600ms
cubic
-
bezier
(
0.47
,
0
,
0.745
,
0.715
)
;
transition
:
all
600ms
cubic
-
bezier
(
0.47
,
0
,
0.745
,
0.715
)
;
}
.
demo2
:
hover
{
left
:
800px
;
}
<
/
style
>
<
/
head
>
<
body
>
<
div
class
=
"demo demo1"
>
demo1
<
/
div
>
<
div
class
=
"demo demo2"
>
demo2
<
/
div
>
<
script
>
$
(
".demo1"
)
.
animate
(
{
left
:
'+=800px'
}
,
1200
,
'easeInOutCirc'
,
function
(
)
{
console
.
log
(
'end'
)
;
}
)
;
setTimeout
(
function
(
)
{
$
(
".demo2"
)
.
css
(
{
left
:
'800px'
}
)
;
}
,
100
)
<
/
script
>
<
/
body
>
<
/
html
>
|