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

今天在一本叫《HTML5触摸界面设计与开发》上看到一个做弹跳球的复杂动画效果，首先加速下降，停止，然后弹起时逐渐减速。是用cubic-bezier贝塞尔曲线来完成的。所以特地去学习了一下关于cubic-bezier贝塞尔曲线。

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

缓动函数：http://www.xuanfengge.com/easeing/easeing/

cubic-bezier：http://cubic-bezier.com/

cubic-bezier是贝塞尔曲线中的绘制方法。

css3中常用的几个动画效果：

  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)

贝塞尔曲线通过四个点来定义一条曲线。这四个值描述了控制点的位置p1,p2，（x1,y1,x2,y2）,值得范围在0-1之间，其他两个点永远是p0（0,0）p3（1,1）。控制点是控制图中的曲线，这些曲线会让球在弹起和下落的过程中，给予（正或负）加速度。(0,.27,.32,1)在上升过程中起作用，(1,0,0.96,0.91)在下降中起作用。

我们现在已经大概了解了一点贝塞尔曲线，接下来就看一个弹跳球的例子。

HTML部分：

 <div id="ball"></div>
 <div id="floor"></div>

CSS部分：

 body{margin:;padding:;}
 #ball{
   background:red;
   height:100px;
   width:100px;
   position:absolute;
   top:10px;
   left:20px;
   border-radius:50px;
 }
 #floor{
   position:absolute;
   bottom:10px;
   left:0px;
   width:350px;
   height:1px;
   border-top:5px solid brown;
 }

检测正确的制造商前缀：

 (function(){

   var down=false, 
 4       trans='transition', 
 5       eventName='transitionend';
   if(typeof document.body.style.webkitTransition==='string'){
       trans='webkitTransition';
       eventName='webkitTransitionEnd';
    }else if(typeof document.body.style.MozTransition==='string'){
       trans='MozTransition';
 }
 })();

document.body.style.webkitTransition获取以webkit为前缀的transition
在WebKit引擎的浏览器中，当css3的transition动画执行结束时，触发webkitTransitionEnd事件。
下面是一个反弹函数：(这个函数写在上面自动执行的函数中)

 var ball=document.getElementById('ball');
       floor=document.getElementById('floor');

 function bounce(){
      if(down){
          ball.style[trans]="Top 1s cubic-bezier(0,.27,.32,1)";
          ball.style.top='10px';
          down=false;
 }else{
     ball.style[trans]="Top 1s cubic-bezier(1,0,0.96,0.91)";
     ball.style.top=(floor.offsetTop-100)+'px';
     down=true;
 }
 }

 ball.addEventListener(eventName,bounce);
 bounce();
 })();