js-Animationslernen (2)

4. Pufferung der Bewegung einer einfachen Animation



Geschwindigkeitspufferung erreichen, d. h. die Geschwindigkeit verschiedener Positionen ist unterschiedlich. Je näher am Zielwert, desto geringer ist die Geschwindigkeit Der Geschwindigkeitswert und der Zielwert unterscheiden sich vom aktuellen Wert. Die Wertedifferenz ist proportional dazu. Hierbei ist zu beachten, dass sich die Geschwindigkeit eines Objekts während der Bewegung kontinuierlich ändert und sich nicht entsprechend einer Ganzzahl ändert. Wenn das Objekt aus Dezimalgründen anhält, kehrt die Position möglicherweise nicht zum ursprünglichen Startpunkt zurück etwas schlechter, sodass die Bewegungsänderung abgepuffert wird. Die Geschwindigkeit sollte aufgerundet werden.

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

Rufen Sie die obige JS-Funktion im folgenden HTML-Dokument auf. Nehmen wir das Div vom letzten Mal als Beispiel:

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

Das Obige ist der Inhalt des js-Animationslernens (2). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (). www.php.cn)!