js animation apprentissage (2)

4. Mouvement tampon d'animation simple



Obtenir une mise en mémoire tampon de vitesse, c'est-à-dire que la vitesse des différentes positions est différente plus la valeur cible est proche, plus la vitesse est petite, donc. la valeur de vitesse et la valeur cible sont différentes de la valeur actuelle. La différence de valeurs est proportionnelle. Une chose à noter ici est que la vitesse d'un objet change continuellement pendant le mouvement et ne change pas selon un nombre entier. Lorsque l'objet s'arrête, pour des raisons décimales, la position peut ne pas revenir au point de départ d'origine, mais le sera. un peu pire, donc le changement de mouvement est tamponné. La vitesse doit être arrondie.

//鼠标移到元素上元素右移，鼠标离开元素回去。
 var timer="";
 function Move(locat) {//移动终点位置
     var ob=document.getElementById('box1');
     clearInterval(timer);
     timer=setInterval(function () {
         var speed=(locat-ob.offsetLeft)/10;//speed的大小和移动距离成正比，分母控制缓冲的快慢，即比例系数K，可调整
         speed=speed>0?Math.ceil(speed):Math.floor(speed);//凡是缓冲运动速度一定要取整！！！向右运动时坐标向上取整，向左运动时坐标向下取整
         if (ob.offsetLeft==locat) {//当前位置到达指定终点，关闭定时器
             clearInterval(timer);            
         } else {
             ob.style.left=ob.offsetLeft+speed+'px';
         }
     }, 30)
 }

Appelez la fonction JS ci-dessus dans le document HTML ci-dessous. Utilisons le div de la dernière fois comme exemple :

<style type="text/css">
     *{
         margin: 0;
         padding: 0;
     }
     
     #box1{
         width: 200px;
         height: 200px;
         background-color: red;
         position: absolute;
         left: 0;
     }
     
 </style>

<div id="box1"></div>
 <script type="text/javascript">
     window.onload=function(){
         var ob=document.getElementById(&#39;box1&#39;);
         ob.onmouseover=function(){
             Move(200);
         }  
         ob.onmouseout=function(){
             Move(0);
         }  
     }
 </script>

Ce qui précède est le contenu de l'apprentissage de l'animation js (2). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (). www.php.cn) !