cubic-bezier貝塞爾曲線css3動畫工具 - hsprout－IT工程師數位筆記本

文章出處

今天在一本叫《HTML5觸摸界面設計與開發》上看到一個做彈跳球的復雜動畫效果，首先加速下降，停止，然后彈起時逐漸減速。是用cubic-bezier貝塞爾曲線來完成的。所以特地去學習了一下關于cubic-bezier貝塞爾曲線。

cubic-bezier比較少用，因為PC端中，有瀏覽器不兼容。但是手機端中，可以使用并帶來炫酷的動畫及體驗。

緩動函數：http://www.xuanfengge.com/easeing/easeing/

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

cubic-bezier是貝塞爾曲線中的繪制方法。

css3中常用的幾個動畫效果：

1  ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
2  linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
3  ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
4  ease-out: cubic-bezier(0, 0, 0.58, 1.0)
5  ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

貝塞爾曲線通過四個點來定義一條曲線。這四個值描述了控制點的位置p1,p2，其他兩個點永遠是p0（0,0）p3（1,1）。控制點是控制圖中的曲線，這些曲線會讓球在彈起和下落的過程中，給予（正或負）加速度。(0,.27,.32,1)在上升過程中起作用，(1,0,0.96,0.91)在下降中起作用。

我們現在已經大概了解了一點貝塞爾曲線，接下來就看一個彈跳球的例子。

HTML部分：

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

CSS部分：

 1 body{margin:0;padding:0;}
 2 #ball{
 3   background:red;
 4   height:100px;
 5   width:100px;
 6   position:absolute;
 7   top:10px;
 8   left:20px;
 9   border-radius:50px;
10 }
11 #floor{
12   position:absolute;
13   bottom:10px;
14   left:0px;
15   width:350px;
16   height:1px;
17   border-top:5px solid brown;
18 }

檢測正確的制造商前綴：

 1 (function(){
 2  
 3   var down=false;
 4       trans='transition';
 5       eventName='transitionend';
 6   if(typeof document.body.style.webkitTransition==='string'){
 7       trans='webkitTransition';
 8       eventName='webkitTransitionEnd';
 9    }elseif(typedof document.body.style.MozTransition==='string'){
10       trans='MozTransition';
11 }
12 })();

document.body.style.webkitTransition獲取以webkit為前綴的transition
在WebKit引擎的瀏覽器中，當css3的transition動畫執行結束時，觸發webkitTransitionEnd事件。
下面是一個反彈函數：

 1 var ball=document.getElementById('ball');
 2       floor=document.getElementById('floor');
 3 
 4 function bounce(){
 5      if(down){
 6          ball.style[trans]="Top 1s cubic-bezier(0,.27,.32,1)";
 7          ball.style.top='10px';
 8          down=false;
 9 }else{
10     ball.style[trans]="Top 1s cubic-bezier(1,0,0.96,0.91)";
11     ball.style.top=(floor.offsetTop-100)+'px';
12     down=true;
13 }
14 }
15 
16 ball.addEventListener(eventName,bounce);
17 bounce();
18 })();