Javascript使用三大家族和事件来DIY动画效果相关笔记（二）

1.offset家族补充

◆offset取值返回时一个number类型的数值，但是它不会返回带小数的整数，内部做了四舍五入的处理，如style.left=9.4px，offsetLeft获取到的值是9，然而style.left=9.5px，offsetLeft获取到的值是10。

2.缓速动画与匀速动画的原理

◆匀速动画的原理：this.style.left=this.offsetLeft+步长（也就是每次递增多少递减多少），步长的递增和递减取决于 指定的位置是大于当前位置还是小于当前位置。

◆缓速动画的原理：this.style.left=this.offsetLeft+步长，这个步长是动态的，speed=（指定的位置-this.offsetLeft）/10，因为只有这样 速度才会从快的到慢，但是可能会出现 当步长过小时，this.offsetLeft从this.style.left哪里获取到的值被四舍五入了，然后造成永远达不到指定的位置并且定时器也无法清除，解决的方法是，每次都对步长进行向上或者向下取舍。

//每次移动的步长
 element.spend = (target - element.offsetLeft) / 10
//对步长进行取整，避免offsetLeft底层的四舍五入的影响
            element.spend = element.spend > 0 ? Math.ceil(element.spend) : Math.floor(element.spend);

这样就能够达到，当步长大于0就向上取整，就不担心offsetLeft四舍五入掉0.5以下的值了，如果步长为负数时，也能够做到-0.5直接向下取整变成-1，于是就解决了指定的位置小于当前位置而造成的不移动并且定时器不停的问题，判断当前的位置和指定的位置是否符合停止定时器的核心代码

 //目标位置减去当前位置的绝对值 如果小于步长的绝对值 那么就说明也就一步之遥了，
  // 那么直接移动到指定的位置清除计时器算了。
if (Math.abs(target - element.offsetLeft) <= Math.abs(element.spend)) {
                element.style.left = target + "px";
                clearInterval(element.timer);
                return;
            }

都是判断左右步长是否小于或者等于当前位置距离指定位置的长度，如果符合条件那么可以直接停止计时器了，这一点无论是匀速还是缓速动画都是一样的。

3.使用offsetLeft和style.left来DIY动画补充

◆封装基础的缓速动画简单版

    
    
    



    移动到200
    移动到600
    

◆封装基础的缓速动画正常版

    
    
    



    移动到200
    移动到600
    

4.使用缓速动画制作，导航背景动画-绿色的筋斗云效果

    
    
    
    



    
    

        
首页新闻
        
活动策划
        
师资力量
        
企业文化
        
招聘信息
        
公司简介
        
北京上海
        
广州深圳
    

转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247739.html