前言
本文将解释,何为贝塞尔曲线,及其如何运用在动画中。
工具及应用
这里给出两个在线动画调试工具。
cubic-bezier还是比较少用到,PC端中,有浏览器不兼容。但是手机端中,可以使用并带来炫酷的动画及体验。
- 缓动函数速查表: http://www.xuanfengge.com/easeing/easeing/
- Ceaser: http://xuanfengge.com/easeing/ceaser/
- cubic-bezier:http://cubic-bezier.com/
贝塞尔曲线
贝塞尔曲线(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表示分别为:
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、线性曲线
线性贝塞尔曲线演示动画,tin [0,1]
2、二次曲线
为建构二次贝塞尔曲线,可以中介点Q0和Q1作为由0至1的t:
- 由P0至P1的连续点Q0,描述一条线性贝塞尔曲线。
- 由P1至P2的连续点Q1,描述一条线性贝塞尔曲线。
- 由Q0至Q1的连续点B(t),描述一条二次贝塞尔曲线。
三次贝塞尔曲线的结构
二次贝塞尔曲线演示动画,tin [0,1]
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,常用动画如下:
div{
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
我们可以通过赋予transition-timing-function不同的值来更换不同的动画,结合cubic-bezier,我们可以做出更多表现的动画。
兼容方案
相比于兼容性不佳的PC端浏览器,一些动画只能用js来实现,而js也有相应的很熟悉的动画库jquery.easeing.js
下面的例子是分别用js及css3实现的效果:http://www.xuanfengge.com/demo/201505/easing/
实现起来也很简单
<!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>