移動端 transition動畫函數的封裝（仿Zepto）以及 requestAnimationFrame動畫函數封裝（仿jQuery）

 

移動端 css3 transition 動畫 ，requestAnimationFrame 動畫  對於性能的要求，h5優先考慮；

移動端 單頁有時候 製做只用到簡單的css3動畫便可，咱們封裝一下，不必引入zepto框架，把zepto的動畫模塊從Zepto 扒下來，加以改造獨立；用於生產環境；下面是 Demo栗子；

上面圖片對應的 js

         var leftsbox=document.getElementById("leftsbox");
	  var boxdiv=leftsbox.getElementsByTagName("div");
	  leftsbox.onclick=function(){
		   for(var i=0;i<boxdiv.length;i++){
			         var that=boxdiv[i];
			 			 transform(that,{ translate3d:'220px,10px,0',left:'1em',opacity:0.2,perspective:'400px', rotateY:'30deg'},800,'cubic-bezier(0.15, 0.5, 0.25, 1.0)',function(){
							   this.innerHTML='結束回調'+this.innerHTML;
						},100*i);
			} //for

　　

再看看另一種 常見的 以下圖

上面對用的 js 代碼

  
                       var nav=document.querySelector(".nav");
			var nava=nav.getElementsByTagName("li");
			var content=document.querySelector(".content");
			var ulcontent=document.getElementById("ulcontent");
			ulcontent.style.width=nav.offsetWidth*nava.length+'px';
			for(var i=0;i<nava.length;i++) {
				nava[i].index=i;
				nava[i].onclick=function(){
					var that=this;
					var now=-(that.index)*content.offsetWidth+'px';

					 transform(ulcontent,{translate3d:''+now+',0,0',},'linear',function(){
					//console.log('success   回調函數');
					})
				}//click end
			}

　　htm結構

 <ul class="nav">
	        <li ><a >首頁</a></li>
	        <li ><a >插件</a></li>
	        <li ><a >新聞</a></li>
	        <li ><a >其餘</a></li>
	    </ul>
   
     <div class="content">
        <ul id="ulcontent" >
        <li ><img src="../../images/1a.jpg"></li>
        <li ><img src="../../images/2a.jpg"></li>
        <li ><img src="../../images/3a.jpg"></li>
        <li style="background:#ddd;" >44444444444</li>
        </ul>
     </div>

　　

基於zepto動畫獨立出來，原先zepto 動畫書寫方式

$("#banners").animate(
    {
        translate3d:'220px,10px,0',
		left:'1em',
		opacity:0.2,
		perspective:'400px', 
		rotateY:'30deg'
    },
    800,
   'cubic-bezier(0.15, 0.5, 0.25, 1.0)',
    function(){  alert('回調'); },
   1000    
)

　　

改寫後 獨立與zepto的 動畫函數 語法以下 

transform(dom元素,{ transitionProperty：css值},transitionDuration(單位：毫秒),transitionTiming,transitionend回調,transitionDelay(單位：毫秒));　

transform(dom元素,animationName,animationDuration(單位：毫秒),animationTiming,animationend回調,animationDelay(單位：毫秒));　

 

/*
* js transfrom
* @param obj {obj}    原生dom對象
* @param properties  {json} ||string     { translate3d:'220px,10px,0',left:'1em',opacity:0.2, rotateY:'30deg'} || animationName 多個能夠以逗號分割 如 'fadeIn,sliderDown';
* @param duration {number}      css3持續時間 秒 默認400毫秒
* @param ease {str}           默認linear 支持  cubic-bezier(0.42,0,1,1)寫法;
* @param callback {function}    回調函數   
* @param delay {number}    延遲時間    

*/

 

/* http://www.cnblogs.com/surfaces/
    * @param properties 爲  {}  或者 string     ；若是 properties= string 爲animation-name
    * transform(elem, properties)
    * transform(elem, properties, ease)
    * transform(elem, properties, ease, delay)
    * transform(elem, properties, ease, callback, delay)
    * transform(elem, properties, callback)
    * transform(elem, properties, callback, delay)
    * transform(elem, properties, duration )
    * transform(elem, properties, duration, ease)
    * transform(elem, properties, duration, delay)
    * transform(elem, properties, duration, callback)	
    * transform(elem, properties, duration, callback,delay)   
    * transform(elem, properties, duration, ease, delay)
    * transform(elem, properties, duration, ease, callback)   
    * transform(elem, properties, duration, ease, callback,delay)
    
    transform(elem,{translateX:'150px',left:'1em',opacity:0.2, rotateY:'40deg'},600,'linear',function(){  console.log('結束回調') },200) ; 

    transform(elem, keyframesName,600,'linear',function(){  console.log('結束回調') },200) ; 
*/

　　

　　　　

關於兼容性：幾乎與zepto一致 ，也支持 動畫幀 keyframe，我的以爲  keyframe移動端 兼容性不是很好，尤爲手機自帶的瀏覽器（原生app 調用 內嵌H5頁面，小問題仍是蠻多的），適合無關dom數據操做，只顯示美化用；

 

 另外，咱們須要瞭解下  css3 transition-duration的屬性寫法有多種；以下

1). 過渡單個屬性：

 transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;

　　

2). 過渡多個屬性：
[1]. 上下一一對應型：
 

transition-property:opacity left;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

　　

此時：opacity過渡時間爲2s，left過渡時間爲4s。

[2]. 循環對應型：
 

transition-property:opacity left width height;
transition-duration:2s, 4s;
transition-timing-function:ease-in;
transition-delay:0;

　　

此時：opacity和width過渡時間爲2s，left和height過渡時間爲4s。

3). transition簡寫模式：
順序爲：transition-property transition-duration transition-timing-function transition-delay

  /*單個屬性：*/
-moz-transition:background 0.5s ease-out 0s;
/*多個屬性：*/
-moz-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;

 

 過渡持續時間
transition-duration 屬性規定了一個過渡從初始狀態到目標狀態的持續時間。它接受以秒或毫秒的值（例如，2.3S和2300ms都是指2.3秒）。
儘管規範明確規定了過渡值必須爲正數，但 Opera 仍接受-5S的值，至少對於getComputedStyle（）來講是這樣的。雖然規範中並無限制屬性值的大小，但 Opera 和 IE 不接受低於10ms的值。而 WebKit 在 getComputedStyle（）執行中有個小bug，例如：返回值0.009999999776482582s會取代0.01s。

 

過渡延遲時間
transition-delay 屬性規定了在執行一個過渡以前的等待時間，一樣使用值。Delay 能夠是負值，但這會致使動畫沒法平滑過渡。
IE 和 Opera 不接受 transition-duration 在-10ms和10ms之間的值。WebKit 的 floating point 也會在這兒出現。

http://www.cnblogs.com/surfaces/ 

 

另外屬性類似點 animation-name：keyfrmaes1,keyfrmaes2;以逗號分割；

 其餘的

zepto核心動畫可是實現了大部分經常使用的動畫；在閱讀器zepto核心動畫源碼的 時候，本身手動封裝 實踐；就機會發現 看似讀懂其實不懂；本身正真封裝調試後；才發現哪些巧；

 

封裝後的   transform.js  源碼以下

 參數說明

/*
* js transfrom
* @param obj {obj}    原生dom對象
* @param properties  {json} || string     { translate3d:'220px,10px,0',left:'1em',opacity:0.2,perspective:'400px', rotateY:'30deg'} ||animation-name
* @param duration {number}      css3持續時間 秒 默認400毫秒
* @param ease {str}         transition-timing-function  默認linear 支持  cubic-bezier(0.42,0,1,1)寫法;
* @param callback {function}    回調函數   
* @param delay {number}    延遲時間    

*/

 使用方法

   /* http://www.cnblogs.com/surfaces/
    * @param properties 爲  {}  或者 string     ；若是 properties= string 爲animation-name
    * transform(elem, properties)
    * transform(elem, properties, ease)
    * transform(elem, properties, ease, delay)
    * transform(elem, properties, ease, callback, delay)
    * transform(elem, properties, callback)
    * transform(elem, properties, callback, delay)
    * transform(elem, properties, duration )
    * transform(elem, properties, duration, ease)
    * transform(elem, properties, duration, delay)
    * transform(elem, properties, duration, callback)	
    * transform(elem, properties, duration, callback,delay)   
    * transform(elem, properties, duration, ease, delay)
    * transform(elem, properties, duration, ease, callback)   
    * transform(elem, properties, duration, ease, callback,delay)
    
    transform(elem,{translateX:'150px',left:'1em',opacity:0.2,perspective:'400px', rotateY:'40deg'},600,'linear',function(){  console.log('結束回調') },200) ; 
    transform(elem, keyframesName,600,'linear',function(){  console.log('結束回調') },200) ; 
*/

　移動端 transform.js 源碼以下；雙擊直接複製便可；　

;(function(window,document,undefined){var prefix=function(){var div=document.createElement("div");var cssText="-webkit-transition:all .1s;-moz-transition:all .1s; -Khtml-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;";div.style.cssText=cssText;var style=div.style;var dom="";if(style.webkitTransition){dom="webkit"}else{if(style.MozTransition){dom="moz"}else{if(style.khtmlTransition){dom="Khtml"}else{if(style.oTransition){dom="o"}else{if(style.msTransition){dom="ms"}}}}}div=null;if(dom){return{dom:dom,lowercase:dom,css:"-"+dom+"-",js:dom[0].toUpperCase()+dom.substr(1)}}else{return false}}();var transitionEnd=function(){var el=document.createElement("div");var transEndEventNames={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};for(var name in transEndEventNames){if(el.style[name]!==undefined){return transEndEventNames[name]}}el=null;return false}();var animationEnd=(function(){var eleStyle=document.createElement("div").style;var verdors=["a","webkitA","MozA","OA","msA"];var endEvents=["animationend","webkitAnimationEnd","animationend","oAnimationEnd","MSAnimationEnd"];var animation;for(var i=0,len=verdors.length;i<len;i++){animation=verdors[i]+"nimation";if(animation in eleStyle){return endEvents[i]}}return"animationend"}());var supportedTransforms=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i;var dasherize=function(str){return str.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()};function transform(obj,properties,duration,ease,callback,delay){if(!obj){return}if(typeof duration=="undefined"){duration=400;ease="linear";callback=undefined;delay=undefined}if(typeof duration=="string"){if(typeof ease=="number"){delay=ease;callback=undefined}if(typeof ease=="function"){delay=callback;callback=ease}ease=duration;duration=400}else{if(typeof duration=="function"){if(typeof ease=="number"){delay=ease}callback=duration;duration=400;ease="linear"}else{if(typeof duration=="number"){if(typeof ease=="undefined"){ease="linear"}else{if(typeof ease=="string"){ease=ease}else{if(typeof ease=="function"){if(typeof callback=="number"){delay=callback}callback=ease;ease="linear"}else{if(typeof ease=="number"){delay=ease;ease="linear"}}}}if(typeof callback=="number"){delay=callback;callback=undefined}}}}delay=(typeof delay=="number")?delay:0;var endEvent=transitionEnd;var nowTransition=prefix.js+"Transition";var nowTransform=prefix.js+"Transform";var prefixcss=prefix.css;if(!prefix.js){nowTransition="transition";nowTransform="transform";prefixcss=""}var transitionProperty,transitionDuration,transitionTiming,transitionDelay;var animationName,animationDuration,animationTiming,animationDelay;var key,cssValues={},cssProperties,transforms="";var transform;var cssReset={};var css="";var cssProperties=[];transform=prefixcss+"transform";cssReset[transitionProperty=prefixcss+"transition-property"]=cssReset[transitionDuration=prefixcss+"transition-duration"]=cssReset[transitionTiming=prefixcss+"transition-timing-function"]=cssReset[transitionDelay=prefixcss+"transition-delay"]=cssReset[animationName=prefixcss+"animation-name"]=cssReset[animationDuration=prefixcss+"animation-duration"]=cssReset[animationTiming=prefixcss+"animation-timing-function"]=cssReset[animationDelay=prefixcss+"animation-delay"]="";if(typeof properties=="string"){cssValues[animationName]=properties;cssValues[animationDuration]=duration+"ms";cssValues[animationTiming]=(ease||"linear");cssValues[animationDelay]=(delay)+"ms";endEvent=animationEnd}else{endEvent=transitionEnd;for(key in properties){if(supportedTransforms.test(key)){transforms+=key+"("+properties[key]+") "}else{cssValues[key]=properties[key],cssProperties.push(dasherize(key))}}if(transforms){cssValues[transform]=transforms,cssProperties.push(transform)}if(duration>0&&typeof properties==="object"){cssValues[transitionProperty]=cssProperties.join(", ");cssValues[transitionDuration]=duration+"ms";cssValues[transitionTiming]=(ease||"linear");cssValues[transitionDelay]=(delay)+"ms"}}for(var attr in cssValues){css+=dasherize(attr)+":"+cssValues[attr]+";"}obj.style.cssText=obj.style.cssText+";"+css;obj.clientLeft;if(!callback){return}var fired=false;var handler=function(event){if(typeof event!=="undefined"){if(event.target!==event.currentTarget){fired=true;return}}callback&&callback.apply(obj,arguments);fired=true;obj.removeEventListener(endEvent,arguments.callee,false)};if(obj.addEventListener){obj.addEventListener(endEvent,handler,false)}if(!endEvent||duration<=0){setTimeout(function(){handler()});return}setTimeout(function(){if(fired){return}handler()},parseInt((duration+delay)+25))}window.transform=transform})(window,document);

　部分示例 使用代碼

　

<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none; margin:0; padding:0;}

html{-webkit-touch-callout:none;-webkit-user-select:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent; font-size:62.5%; }
body{ font-size:14px;}

	  
#leftsbox{ width:88%; height:auto; overflow:hidden; border:2px solid red; margin:0 auto; padding:30px 0;}
#leftsbox div{ width:80px; height:80px; background:#6C6; margin-bottom:10px; position:relative; left:0; backface-visibility:hidden;  
-webkit-animation-fill-mode:forwards; 
	animation-fill-mode:forwards;
}

@keyframes keyframesName{
	0%{ transform:translateX(0)}
	100%{transform:translateX(600px) }
}
@-webkit-keyframes keyframesName{
	0%{ -webkit-transform:translateX(0)}
	100%{-webkit-transform:translateX(600px) }
}

    </style>
    <div id="leftsbox">
      <div class="leftssa" style="background:red">1 lefts 22   RAF</div>
      <div class="leftssa " style="width:120px; background:#FF0">2 lefts 22   RAF</div>
      <div class="leftssa"> 333lefts 22   RAF</div>
    </div>
    
<script>

	  var leftsbox=document.getElementById("leftsbox");
	  var boxdiv=leftsbox.getElementsByTagName("div");
	  leftsbox.onclick=function(e){
		 
		   for(var i=0;i<boxdiv.length;i++){
			         var that=boxdiv[i];
			 // transform(that,{ translate3d:'220px,10px,0',left:'1em',opacity:0.2,perspective:'400px', width:'200px', rotateY:'30deg'},800,'cubic-bezier(0.15, 0.5, 0.25, 1.0)',function(){
				//  this.innerHTML='結束回調'+this.innerHTML;
			// },1000*i);
						
						
                    /*   properties json(css3 屬性)  或者 string(css3動畫名稱)
				      * transform(elem, properties)
					  * transform(elem, properties, ease)
					  * transform(elem, properties, ease, delay)
					  * transform(elem, properties, ease, callback, delay)
					  * transform(elem, properties, callback)
					  * transform(elem, properties, callback, delay)
					  * transform(elem, properties, duration )
					  * transform(elem, properties, duration, ease)
					  * transform(elem, properties, duration, delay)
					  * transform(elem, properties, duration, callback)	
					  * transform(elem, properties, duration, callback,delay)   
					  * transform(elem, properties, duration, ease, delay)
					  * transform(elem, properties, duration, ease, callback)   
					  * transform(elem, properties, duration, ease, callback,delay)
                     */
					 
					 //測試 properties爲 keyframes
					 var keyframes='keyframesName';
					 //transform(that, keyframes) 
					 //transform(that, keyframes,'ease') 
					 //transform(that, keyframes,'ease',1000*i) 
					 //transform(that, keyframes,'ease',function(){ this.innerHTML='結束回調'+this.innerHTML;},1000*i) 
					
					//transform(that, keyframes,function(){ this.innerHTML='結束回調'+this.innerHTML;})
					//transform(that, keyframes,function(){ this.innerHTML='結束回調'+this.innerHTML;},1000*i) 
					
					//transform(that, keyframes,600)  
					//transform(that, keyframes,600,ease') 
					//transform(that, keyframes,600,1000*i) ;
					//transform(that, keyframes,600,function(){ this.innerHTML='結束回調'+this.innerHTML;}) ;  
					//transform(that, keyframes,600,function(){ this.innerHTML='結束回調'+this.innerHTML;},1000*i) ;
					
					//transform(that, keyframes,600,'ease',1000*i) 
					// transform(that, keyframes,600,'ease',function(){ this.innerHTML='結束回調'+this.innerHTML;}) ;
					// transform(that, keyframes,600,function(){ this.innerHTML='結束回調'+this.innerHTML;},1020*i) ; 
					// transform(that, keyframes,600,function(){ this.innerHTML='結束回調'+this.innerHTML;},-20*i) ; //css3 animation-delay 支持負數 直接進入到時間點
					
					 //測試 properties爲 Json
					 var json={translate3d:'600px,10px,0',left:'1em',opacity:0.2,perspective:'400px', width:'200px', rotateY:'30deg'}
					 //transform(that,json);
					  // transform(that, json,'ease') 
					 //transform(that, json,'ease',1000*i) 
					 //transform(that, json,'ease',function(){ this.innerHTML='結束回調'+this.innerHTML;},1000*i) 
					
					//transform(that, json,function(){ this.innerHTML='結束回調'+this.innerHTML;})
					//transform(that, json,function(){ this.innerHTML='結束回調'+this.innerHTML;},1000*i) 
					
					//transform(that, json,600)  
					//transform(that, json,600,'ease') 
					//transform(that, json,600,1000*i) ;
					//transform(that, json,600,function(){ this.innerHTML='結束回調'+this.innerHTML;}) ;  
					// transform(that, json,600,function(){ this.innerHTML='結束回調'+this.innerHTML;},1000*i) ;
					
					//transform(that, json,600,'ease',1000*i) 
					//transform(that, json,600,'ease',function(){ this.innerHTML='結束回調'+this.innerHTML;}) ;
					transform(that, json,600,'ease',function(){ this.innerHTML='結束回調'+this.innerHTML;},1000*i) ;
					//transform(that, json,600,'ease',function(){ this.innerHTML='結束回調'+this.innerHTML;},-100*i) ; ////css3 transition-delay 支持負數 直接進入到時間點
					
					   
            } //for end
		 
	  }	  			
</script>

　　

惟一的缺點  scrollTop 緩動不支持； 這裏有個簡易的  函數 相似jquery  語法幾乎同樣 基於時間 算法 使用 requestAnimationFrame  

先看效果

 

相關佈局

<ul id="inner" >
        <li><a class="on" >護膚</a></li>
        <li><a >彩妝</a></li>
        <li><a >洗護</a></li>
        <li><a >套裝</a></li>
    </ul>
    
     <ul class="uls" id="uls">
        <li id='li1'></li>
         <li id='li12'></li>
         <li id='li3'></li>
  
 </ul>

    
    
 <div class="box22">
 <div class="boxs">1111111111111111111111111111111111</div>
  <div class="boxs">22222222222222222222222222222</div>
  
   <div class="boxs">33333333333333333333333</div>
  <div class="boxs" style="height:100px;">4444444444444444444最後一個 </div>
 </div>
 
 
 <div id="gpTop">tops</div>

 

 

上圖相關js

  document.getElementById("gpTop").onclick=function(e){
              var  that=this;
                 startMove(that,{"scrollTop":0},function(){
                    that.innerHTML='到頂了';
                     });  //width: 206px; height: 101px; opacity: 0.3;
                }
                
                
                var inner=document.getElementById("inner");
                var inlione=inner.getElementsByTagName("li");
                var box=document.querySelectorAll(".boxs");
                
                for(var i=0;i<inlione.length;i++) {  
                 inlione[i].index=i;
                 inlione[i].onclick=function(e){
                 var that=this;
                // console.log(that.index);
                 var box2=box[that.index];
                 var nowTop=getOffest(box2).top;
                // console.log(nowTop);
                 
                  animate(window,{"scrollTop":nowTop},function(){
                    //console.log('success');
                    });
           }
             
        }

若是經過原生js  獲取  jquey的offset().top  的值呢 以下  這裏

  
var getOffest=function (obj){
var top=0,left=0;
if(obj){
 while(obj.offsetParent){
      top += obj.offsetTop;
      left += obj.offsetLeft;
      obj = obj.offsetParent;
   }
 }

  return{
  top : top,
  left : left
  }
}

 

animate.js基於 requestAnimationFrame  兼容ie8+    （單位px  未作rem 兼容處理 ，沒有jquery的 stop()處理）

語法以下

 

animate(dom元素,{"left":1300,"opacity":90},持續時間(毫秒),緩動形式（tween函數）,回調函數）；

			  animate(element,{"left":1300,"opacity":90},2000,'easeOut',function sa(){
			  console.log('回調函數');
			 });  

 

爲何要用   requestAnimationFrame  。

瀏覽器能夠優化並行的動畫動做，更合理的從新排列動做序列，並把可以合併的動做放在一個渲染週期內完成，從而呈現出更流暢的動畫效果。好比，經過requestAnimationFrame()，JS動畫可以和CSS動畫/變換或SVG SMIL動畫同步發生。另外，若是在一個瀏覽器標籤頁裏運行一個動畫，當這個標籤頁不可見時，瀏覽器會暫停它，這會減小CPU，內存的壓力，節省電池電量。

相信往後  requestAnimationFrame 在移動端發展的前景是至關不錯的，目前安卓上感受仍是有點丟幀。抖動明顯；

 

requestAnimationFrame  一個簡單的例子

var start = null;
var ele = document.getElementById("j_precent");
var progress = 0;

function step() {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}

document.getElementById("btn_run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
     step()
}, false);

　　

以下   jQuery1.6.2還用 requestAnimationFrame；

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

　　http://stackoverflow.com/questions/7999680/why-doesnt-jquery-use-requestanimationframe

爲啥jquery 放棄，上面說的比較完善；

 

animate源碼以下

;(function() {

  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];

  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }

}());

var getStyle=function (obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}    
      
var Tween = {
    linear: function (t, b, c, d){  //勻速
        return c*t/d + b;
    },
    easeIn: function(t, b, c, d){  //加速曲線
        return c*(t/=d)*t + b;
    },
    easeOut: function(t, b, c, d){  //減速曲線
        return -c *(t/=d)*(t-2) + b;
    },
    easeBoth: function(t, b, c, d){  //加速減速曲線
        if ((t/=d/2) < 1) {
            return c/2*t*t + b;
        }
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInStrong: function(t, b, c, d){  //加加速曲線
        return c*(t/=d)*t*t*t + b;
    },
    easeOutStrong: function(t, b, c, d){  //減減速曲線
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeBothStrong: function(t, b, c, d){  //加加速減減速曲線
        if ((t/=d/2) < 1) {
            return c/2*t*t*t*t + b;
        }
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    elasticIn: function(t, b, c, d, a, p){  //正弦衰減曲線（彈動漸入）
        if (t === 0) { 
            return b; 
        }
        if ( (t /= d) == 1 ) {
            return b+c; 
        }
        if (!p) {
            p=d*0.3; 
        }
        if (!a || a < Math.abs(c)) {
            a = c; 
            var s = p/4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasticOut: function(t, b, c, d, a, p){    //正弦加強曲線（彈動漸出）
        if (t === 0) {
            return b;
        }
        if ( (t /= d) == 1 ) {
            return b+c;
        }
        if (!p) {
            p=d*0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },    
    elasticBoth: function(t, b, c, d, a, p){
        if (t === 0) {
            return b;
        }
        if ( (t /= d/2) == 2 ) {
            return b+c;
        }
        if (!p) {
            p = d*(0.3*1.5);
        }
        if ( !a || a < Math.abs(c) ) {
            a = c; 
            var s = p/4;
        }
        else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        if (t < 1) {
            return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
                    Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        }
        return a*Math.pow(2,-10*(t-=1)) * 
                Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
    }
}




function animate(obj,json,times,fx,fn){
    
    if( typeof times == 'undefined' ){
        times = 400;
        fx = 'linear';
    }
    
    if( typeof times == 'string' ){
        if(typeof fx == 'function'){
            fn = fx;
        }
        fx = times;
        times = 400;
    }
    else if(typeof times == 'function'){
        fn = times;
        times = 400;
        fx = 'linear';
    }
    else if(typeof times == 'number'){
        if(typeof fx == 'function'){
            fn = fx;
            fx = 'linear';
        }
        else if(typeof fx == 'undefined'){
            fx = 'linear';
        }
    }
    
    

    var iCur = {};
    var startTime = +new Date();
    
    for(var attr in json){
        iCur[attr] = 0;
        
        if( attr == 'opacity' ){
            if(Math.round(getStyle(obj,attr)*100) == 0){
                iCur[attr] = 0;
            }
            else{
                iCur[attr] = Math.round(getStyle(obj,attr)*100) || 100;
            }
        }
        else if(attr == 'scrollTop' ){
                 iCur[attr]=window.scrollY||document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;;         
            }
        else{
            iCur[attr] = parseInt(getStyle(obj,attr)) || 0;
        }
        
    }
    
    
        if(obj.timer){
        cancelAnimationFrame(obj.timer)
        }
        //obj.timer=null;
    
    function update(){    
        
        var changeTime = +new Date();
        var scale = 1 - Math.max(0,startTime - changeTime + times)/times;
        
        for(var attr in json){
            
            var value = Tween[fx](scale*times, iCur[attr] , json[attr] - iCur[attr] , times );
            
            if(attr == 'opacity'){
                obj.style.filter = 'alpha(opacity='+ value +')';
                obj.style.opacity = value/100;
            }else if(attr == 'scrollTop'){
                 window.scrollTo(0, value); 
           }else{
                obj.style[attr] = value + 'px';
            }
            
        }
        
        if(scale == 1){
                cancelAnimationFrame(obj.timer);
                 fn&&fn.apply(this, arguments);
        }else{
             //setup_fps_meters();
            obj.timer=requestAnimationFrame(arguments.callee);
            }
        
   }//update  end
   //    requestAnimationFrame(update);  //某些時候 畫的過快  有bug
    update();
    
}    
    
    

Tween.js  
/*

* t : time 已過期間
* b : begin 起始值
* c : count 總的運動值
* d : duration 持續時間
* */
 
//Tween.linear();

 

 

css cubic-bezier 緩動備份查看  注意點：x1,x2,y1,y2的值範圍在[0, 1]。

var easingMap = {
  "linear": [0.250, 0.250, 0.750, 0.750],
  "ease": [0.250, 0.100, 0.250, 1.000],
  "easeIn": [0.420, 0.000, 1.000, 1.000],
  "easeOut": [0.000, 0.000, 0.580, 1.000],
  "easeInOut": [0.420, 0.000, 0.580, 1.000],
  "easeInQuad": [0.550, 0.085, 0.680, 0.530],
  "easeInCubic": [0.550, 0.055, 0.675, 0.190],
  "easeInQuart": [0.895, 0.030, 0.685, 0.220],
  "easeInQuint": [0.755, 0.050, 0.855, 0.060],
  "easeInSine": [0.470, 0.000, 0.745, 0.715],
  "easeInExpo": [0.950, 0.050, 0.795, 0.035],
  "easeInCirc": [0.600, 0.040, 0.980, 0.335],
  "easeInBack": [0.600, -0.280, 0.735, 0.045],
  "easeOutQuad": [0.250, 0.460, 0.450, 0.940],
  "easeOutCubic": [0.215, 0.610, 0.355, 1.000],
  "easeOutQuart": [0.165, 0.840, 0.440, 1.000],
  "easeOutQuint": [0.230, 1.000, 0.320, 1.000],
  "easeOutSine": [0.390, 0.575, 0.565, 1.000],
  "easeOutExpo": [0.190, 1.000, 0.220, 1.000],
  "easeOutCirc": [0.075, 0.820, 0.165, 1.000],
  "easeOutBack": [0.175, 0.885, 0.320, 1.275],
  "easeInOutQuad": [0.455, 0.030, 0.515, 0.955],
  "easeInOutCubic": [0.645, 0.045, 0.355, 1.000],
  "easeInOutQuart": [0.770, 0.000, 0.175, 1.000],
  "easeInOutQuint": [0.860, 0.000, 0.070, 1.000],
  "easeInOutSine": [0.445, 0.050, 0.550, 0.950],
  "easeInOutExpo": [1.000, 0.000, 0.000, 1.000],
  "easeInOutCirc": [0.785, 0.135, 0.150, 0.860],
  "easeInOutBack": [0.680, -0.550, 0.265, 1.550],
  "custom": [0.000, 0.350, 0.500, 1.300],
  "random": [Math.random().toFixed(3),
      Math.random().toFixed(3),
      Math.random().toFixed(3),
      Math.random().toFixed(3)]
    }

This curve contains values out of range. But fear not young padawan! Just use cubic-bezier(.25,.1,.39,1) as well for Webkit until the bug #45761 fix propagates to Safari.

 接近ios 原生 的切換 cubic-bezier(0.42, 0, 0.58, 1.0)

http://www.cnblogs.com/surfaces/

 

 

 

 // transform兼容
    function preTransform() {
        var cssPrefix,
        vendors = {
          '': '',
          Webkit: 'webkit',
          Moz: '',
          O: 'o',
          ms: 'ms'
        },
        testEle = document.createElement('p'),
        cssSupport = {};
 
         // 嗅探特性
        Object.keys(vendors).some(function(vendor) {
            if (testEle.style[vendor + (vendor ? 'T' : 't') + 'ransform'] !== undefined) {
              cssPrefix = vendor ? '-' + vendor.toLowerCase() + '-' : '';
              return true;
            }
        });
 
      function normalizeCss(name) {
        name = name.toLowerCase();
        return cssPrefix ? cssPrefix + name : name;
      }
 
      cssSupport = {
        transform: normalizeCss('Transform'),
      }
 
      return cssSupport.transform;
    }
}());

　　

 參考資料：

snabbt.js

 http://daniel-lundin.github.io/snabbt.js/index.html

jquery.transit.js

Zepto.js

Bootstrap.transition.js jquery.js