9種類のオリジナルjsアニメーション効果

21559 ワード
ページを作る中で、多くの場合、ページ上でアニメーション効果を作ることに遭遇します.私たちはほとんどのアニメーションを作るときにフレームワークを使っています(例えばjquery)、ここでは、オリジナルのjsを通じてフレームワークのようなアニメーション効果を実現する方法を紹介します.1、均一なアニメーション効果説明:均一なアニメーションはアニメーションの効果が初めから終わりまで毎回実行する速度が一致している





    





 

 






window.onload = function(){
 var odiv = document.getElementById('odiv');
 odiv.onmouseover = function(){
  startMover(0);
 }
 odiv.onmouseout = function(){
  startMover(-200);
 }
}
var timer = null;
function startMover(itarget){//   
 clearInterval(timer);//               
 var odiv = document.getElementById('odiv');
 timer = setInterval(function(){
 var speed = 0;
 if(odiv.offsetLeft > itarget){
  speed = -1;
 }
 else{
  speed = 1;
 }
 if(odiv.offsetLeft == itarget){
  clearInterval(timer);
 }
 else{
  odiv.style.left = odiv.offsetLeft+speed+'px';
  }
 },30);
}
//  ：offsetWidth = width+padding+border
//offsetHeight = height+padding+border
//offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
//offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
/*
offsetLeft=(offsetParent padding-left)+(     offsetWidth)+(     margin-left)。
offsetTop=(offsetParent padding-top)+(     offsetHeight)+(     margin-top)。
 offsetParent body       :
 IE8/9/10 Chrome ，offsetLeft = (body margin-left)+(body border-width)+(body padding-left)+(     margin-left)。
 FireFox ，offsetLeft = (body margin-left)+(body padding-left)+(     margin-left)。
offsetParent           ，         offsetParent      （          ），       CSS       。            CSS  ,  offsetParent            。
        ：
1、               CSS  （position absolute relative），offsetParent body。
2、             CSS  （position absolute relative），offsetParent          。
*/

2、バッファアニメーションの説明:バッファアニメーションはアニメーションが終わるまで或いはこれが始まる時、速度はアニメーションの実行の進度に従って動的に変化する





    





 

 






window.onload = function(){
 var odiv = document.getElementById('odiv');
 odiv.onmouseover = function(){
  startMover(0);
 }
 odiv.onmouseout = function(){
  startMover(-200);
 }
}
var timer = null;
function startMover(itarget){//      
 clearInterval(timer);//               
 var odiv = document.getElementById('odiv');
 timer = setInterval(function(){
 var speed = (itarget-odiv.offsetLeft)/10;//            
 //       0，      ，       
 speed = speed>0?Math.ceil(speed):Math.floor(speed);
 //Math.floor();    
 if(odiv.offsetLeft == itarget){
  clearInterval(timer);
 }
 else{
  //clientLeft      offsetLeft                     
  odiv.style.left = odiv.offsetLeft+speed+'px';
  }
 },30);
}

3、透明度アニメーションの説明:要素の透明効果を処理するアニメーション





     








window.onload = function(){
 var odiv = document.getElementsByTagName('div');
 for(var i=0;i<odiv.length;i++)
 {
   odiv[i].onmouseover = function(){
   startOP(this,100);
  }
  odiv[i].onmouseout = function(){
   startOP(this,30);
  }
  odiv[i].timer = null;//    
  odiv[i].alpha = null;//    
  //        ，            ，           ，    
 }
}
function startOP(obj,utarget){
  clearInterval(obj.timer);//      
  obj.timer = setInterval(function(){
  var speed = 0;
  if(obj.alpha>utarget){
  speed = -10;
  }
  else{
  speed = 10;
  }
  obj.alpha = obj.alpha+speed;
  if(obj.alpha == utarget){
  clearInterval(obj.timer);
  }
  obj.style.filter = 'alpha(opacity:'+obj.alpha+')';//  IE 
  obj.style.opacity = parseInt(obj.alpha)/100;
  },30); 
}

4、多物体动画
说明：多个物体在一起执行的动画效果






     





 
    
  
  • 
  
  • 
  
  • 
 






window.onload = function(){
 var olist = document.getElementsByTagName('li');
 for(var i=0; i<olist.length;i++)
 {
  olist[i].onmouseover = function(){
  startmov(this,400);
  };
  olist[i].onmouseleave = function(){
  startmov(this,200);
  };
  olist[i].timer = null;
 }
 function startmov(obj,itarget){
  clearInterval(obj.timer);//          
  obj.timer = setInterval(function(){
   var speed =0;
   speed = (itarget - obj.offsetWidth)/8;
   speed = speed>0?Math.ceil(speed):Math.floor(speed);
   if(obj.offsetWidth == itarget){
   clearInterval(obj.timer);
   }
   else{
   obj.style.width = obj.offsetWidth+speed+'px';
   }
  },30);
 }
}
//offsetWidth           （        ）
//        ，

5、スタイルアニメーションの説明を取得:ここでの取得スタイルは、要素のスタイルを計算し、その計算結果によって要素を操作する





    






 hjshfjdfsdfhsdj





/*
currentStyle：        ，      、    。
  ：           ，         ，   style        ，      。
  ：         background   ，         background-color 。
alert (oAbc.currentStyle);
      ，                     。    ，         ，IE8 Opera 11   “object CSSStyleDeclaration”；FF 12、chrome 14、safari 5   “undefined”。
  currentStyle          ，                   、       ，          。
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
  //IE、Opera
  alert("   currentStyle");
} else {
  //FF、chrome、safari
  alert("    currentStyle");
}
   FF          getComputedStyle(obj,false)    IE currentStyle     。
getComputedStyle(obj,false)： FF            ，     ，      “false”         ，                。
    ：
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
  //IE、Opera
  //alert("   currentStyle");
  alert(oAbc.currentStyle.width);
} else {
  //FF、chrome、safari
  //alert("    currentStyle");
  alert(getComputedStyle(oAbc,false).width);
}
       body id=”abc”，      ，IE Opera  “auto”，          “***px”。      ，      chrome safari       ，          。   currentStyle      (FF、chrome、safari)，    getComputedStyle 。
    ：        currentStyle    + getComputedStyle，                。          ，     ？^_^
  currentStyle：IE、Opera
  getComputedStyle：FireFox、Chrome、Safari
         ，currentStyle         ”auto”， getComputedStyle       ”**px”。            ，               。
*/
window.onload = function(){
 var odiv = document.getElementById('odiv');
 odiv.onmouseover = function(){
  startMov(this);
 };
 function startMov(obj){
  setInterval(function(){
  obj.style.width = parseInt(getStyle(obj,'width'))+1+'px';
  obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+'px';
  },30);
 }
 function getStyle(obj,attr)
 {
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }
  else{
  return getComputedStyle(obj,false)[attr];
  }
 }
}
//offsetWidth           （        ）
//        ，

6、マルチオブジェクト複雑アニメーション説明:マルチオブジェクト複雑アニメーションは要素の異なる属性変化を制御してアニメーション効果を実現できる





       





 
    
  
  • 
  
  • 
 






window.onload = function(){
 var li1 = document.getElementById('li1');
 var li2 = document.getElementById('li2');
 li1.onmouseover = function(){
  startMov(this,400,'width');
 };
 li1.onmouseout = function(){
  startMov(this,200,'width');
 };
 li2.onmouseover = function(){
  startMov(this,200,'height');
 };
 li2.onmouseout = function(){
  startMov(this,100,'height');
 };
 function startMov(obj,itarget,attr){
  clearInterval(obj.timer);//          
  obj.timer = setInterval(function(){
   var icur = parseInt(getStyle(obj,attr));
   var speed =0;
   speed = (itarget - icur)/8;
   speed = speed>0?Math.ceil(speed):Math.floor(speed);
   if(icur == itarget){
   clearInterval(obj.timer);
   }
   else{
   obj.style[attr] = icur+speed+'px';
   }
  },30);
 }
 function getStyle(obj,attr)
 {
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }
  else{
  return getComputedStyle(obj,false)[attr];
  }
 }
}
//offsetWidth           （        ）
//        ，

7、多物体複雑アニメーション(透明度のある)





       (     )






 
    
  
  • 
  
  • 
 






window.onload = function(){
 var li1 = document.getElementById('li1');
 var li2 = document.getElementById('li2');
 li1.onmouseover = function(){
  startMov(this,100,'opacity');
 };
 li1.onmouseout = function(){
  startMov(this,30,'opacity');
 };
 li2.onmouseover = function(){
  startMov(this,200,'height');
 };
 li2.onmouseout = function(){
  startMov(this,100,'height');
 }
 li1.timer = null;
 li2.timer = null;
 function startMov(obj,itarget,attr){
  clearInterval(obj.timer);//          
  obj.timer = setInterval(function(){
   var icur = 0;
   if(attr == 'opacity'){
   icur = Math.round(parseFloat(getStyle(obj,attr))*100);//     ,       
   //                  ！
   }
   else{
   icur = parseInt(getStyle(obj,attr));
   }
   var speed =0;
   speed = (itarget - icur)/8;
   speed = speed>0?Math.ceil(speed):Math.floor(speed);
   if(icur == itarget){
   clearInterval(obj.timer);
   }
   else{
    if(attr == 'opacity'){
    obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
    obj.style.opacity = (icur+speed)/100;
    }
    else{
    obj.style[attr] = icur+speed+'px';
    } 
   }
  },30);
 }
 function getStyle(obj,attr)
 {
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }
  else{
  return getComputedStyle(obj,false)[attr];
  }
 }
}
//offsetWidth           （        ）
//        ，

8、チェーンアニメーションの説明:チェーンアニメーションは現在のアニメーションの実行が完了した後に次のアニメーション効果を実行する





    





 
    
  
  • 
 






window.onload = function(){
 var li1 = document.getElementById('li1');
 li1.onmouseover = function(){
  startMov(li1,400,'width',function(){
   startMov(li1,200,'height',function(){
   startMov(li1,100,'opacity');
   });
  });
 };
 li1.onmouseout = function(){
  startMov(li1,30,'opacity',function(){
   startMov(li1,100,'height',function(){
   startMov(li1,100,'width');
   });
  });
 };
 li1.timer = null;
 function startMov(obj,itarget,attr,fn){//fn    
  clearInterval(obj.timer);//          
  obj.timer = setInterval(function(){
   var icur = 0;
   if(attr == 'opacity'){
   icur = Math.round(parseFloat(getStyle(obj,attr))*100);//     ,       
   //                  ！
   }
   else{
   icur = parseInt(getStyle(obj,attr));
   }
   var speed =0;
   speed = (itarget - icur)/8;
   speed = speed>0?Math.ceil(speed):Math.floor(speed);
   if(icur == itarget){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
   }
   else{
    if(attr == 'opacity'){
    obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
    obj.style.opacity = (icur+speed)/100;
    }
    else{
    obj.style[attr] = icur+speed+'px';
    } 
   }
  },30);
 }
 function getStyle(obj,attr)
 {
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }
  else{
  return getComputedStyle(obj,false)[attr];
  }
 }
}
//offsetWidth           （        ）
//        ，

9、マルチオブジェクト同時運動アニメーション(チェーンアニメーションをサポート)





         





 
    
  
  • 
 






window.onload = function(){
 var li1 = document.getElementById('li1');
 li1.onmouseover = function(){
  startMov(li1,{width:201,height:200,opacity:100});
 };
 li1.onmouseout = function(){
  startMov(li1,{width:200,height:100,opacity:30});
 };
 li1.timer = null;
 function startMov(obj,json,fn){//fn    
  clearInterval(obj.timer);//          
  var flag = true;//        
  obj.timer = setInterval(function(){
   for(var attr in json){
   var icur = 0;
   if(attr == 'opacity'){
   icur = Math.round(parseFloat(getStyle(obj,attr))*100);//     ,       
   //                  ！
   }
   else{
   icur = parseInt(getStyle(obj,attr));
   }
   var speed =0;
   speed = (json[attr] - icur)/8;
   speed = speed>0?Math.ceil(speed):Math.floor(speed);
   if(icur != json[attr]){
   flag = false;
   }
   if(attr == 'opacity'){
   obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
   obj.style.opacity = (icur+speed)/100;
   }
   else{
   obj.style[attr] = icur+speed+'px';
   }
   if(flag){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
   }
  }
  },30);
 }
 function getStyle(obj,attr)
 {
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }
  else{
  return getComputedStyle(obj,false)[attr];
  }
 }
}
//offsetWidth           （        ）
//        ，

最後のアニメーション効果は上述のすべてのアニメーションのコードを完備して、自分で上述のコードによって拡張することができます!
実はこの9種類の原生jsアニメーションの効果、すべて独特な点があって、すべてのソースコードはすべて直接複製して運行することができて、みんなにjsアニメーションを掌握することに役立つことを望みます.
checkboxは1つしか選択できません.divの下でcheckboxの遍歴
文法設計、voidの修正