jsアニメーション学習(2)

4. シンプルアニメーションのバッファリングモーション



は、速度のバッファリングを実現します。つまり、異なる位置の速度が異なるため、速度の値は目標値に近づくほど小さくなります。目標値と現在値の間。ここで注意すべき点は、オブジェクトの速度は運動中に連続的に変化し、整数に従って変化するわけではないということです。オブジェクトが停止すると、小数点の理由により、位置は元の開始点に戻らない場合があります。少し悪いので、モーションの変化をバッファリングし、速度を切り上げる必要があります。

//鼠标移到元素上元素右移，鼠标离开元素回去。
 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)
 }

以下の HTML ドキュメントで上記の JS 関数を呼び出します。前回の div を例に挙げてみましょう:

<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>

上記は、js アニメーション学習 (2) の内容です。さらに関連するコンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。