javaScript基础(7)-（匀速动画实现的步骤）；

javaScript基础(7)-动画

    1.js中的动画，就是用定时器，不断的检测自身的位置加上步长所形成的一种移动效果；
        公式为：动画公式=obj.offsetLeft+step;
        我们先来体验一下动画：

           
           
          
    
    
    
      
       
    

    点击
    
      
       

这是一个普通的动画，实现效果，有兴趣的話，可以粘贴复制，然后自己试一下；
问题：（1）为什么会无限制的移动；
（2）什么时候会停下来；
（3）怎么才能让他倒退；
回答：1.因为定时器一直调用；
2.可以设置条件，如到了400的位置停下来；
3.可以设置步长为负数；
再看一个代码；

         
         
         
   
   
   
       
       
             

             点击
             
       
         

我们只在里面做了两件事情就把动画停了下来，1.给定时器加一个名字；2.给动画移动设置一个条件；
当到达我们条件的时候，清空定时器；
3.怎么让动画倒退？
在看一段代码；

    
    
    


    

    200
    400
    

这段代码我们勉强能实现向后倒退的需求，但是到了指定位置会出现抖动的效果，这是为什么呢？
答：我们设置的目标位置为200，到了以后定时器还在走动，这就意味着，定时器里面的代码，还在运动，就会出现步长的判断（var step=target>div.offsetLeft?10:-10;）目标是200，自身位置已经到达了200，200>200?不大于，不大于的話，就会选择-10这个步长。然后在向下走（div.style.left=div.offsetLeft+step+'px';）div.offsetLeft的位置已经到达了200，步长为-10，然后盒子距左边的距离已经是190了，所以下次会选择步长为10，接着判断，这就形成了步长一直在10和-10之间切换，形成了盒子的抖动；
怎么解决这样的效果，在看一段代码；

       


   
   
   


   

   200
   400
   

我们设置一个绝对值，来确定，到底在哪里停留；
这就解决了盒子到达目标点位置的时候来回颤抖的问题；
最根本的解决思路是清除定时器；