练习：缓冲减速运动、多物体运动

缓冲运动应用：
例子：跟随页面滚动的缓冲侧边栏
遇到问题：一个元素的left加小数是没有意义，会转成整数，造成死循环
解决技巧:
1、speed速度越来越慢,直到speed成小数设置speed取整行为，left每次加一直到目标点
2、根据方向speed为正时成小数向上进行取整，直到left为300停止定时器，反之向下取整
3、距离越远速度越大、公式：速度=（目标值-当前值）/缩放系数
4、潜在问题目标值不是整数，解决： 速度取整，

例1：缓冲减速运动基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓冲减速运动</title>
    <style>
        *{margin:0;padding:0;}
        #aa1 {position:absolute;left:500px;width:100px;height:100px;background:#F00;display:inline-block;}
        #btn1 {position:absolute;top:120px;}
        .line {position:absolute;left:300px;width:1px;height:500px;background:#000;}
    </style>
</head>
<body>
<input type="button"  value = "移动" id="btn1">
<div id="aa1"></div>
<div id="aa2"></div>
<div class='line'></div>
<script>
    var oDiv = document.querySelector('#aa1');
    var oBtn = document.querySelector('#btn1');
    var timer=null;
    oBtn.onclick=function(){
        var speed=0;
        clearInterval(timer);
        timer = setInterval(function(){
            //1、speed速度越来越慢,直到speed成小数取整，
            speed =(300-oDiv.offsetLeft) / 8;
            speed=speed<0?Math.floor(speed):Math.ceil(speed);
            if(oDiv.offsetLeft == 300){
                clearInterval(timer);
                timer=null;
            }
            else {
                oDiv.style.left = parseInt(oDiv.offsetLeft + speed) + 'px';
                console.log( oDiv.style.left+', '+speed);
            }

        },20)
    };
</script>
</body>
</html>

View Code

例2：跟随页面滚动的缓冲侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跟随页面滚动的缓冲侧边栏</title>
    <style>
        *{margin:0;padding:0;}
        #aa {position:absolute;right:0px;width:20px;height:100px;
            background:#F00;display:inline-block;top:0px;}
        body{height: 2000px;}
    </style>
</head>
<body>
<div id="aa"></div>
<script>
    //滚动条高度
    var oDiv = document.getElementById('aa');
    //浏览器可视区域的宽度(常用)：document.documentElement.clientHeight
    var iTop = (document.documentElement.clientHeight-oDiv.offsetHeight)/2;
    window.onscroll=function(){
        iScrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        // oDiv.style.top = iTop+iscroll+'px';
        animate(iTop+iScrollTop);
    }
    var timer =null;
    function animate(dest){
        var speed=0;
        clearInterval(timer);
        timer =setInterval(function(){
            //1、缓冲运动公式：速度=（目标值-当前值）/缩放系数
            speed =( dest -oDiv.offsetTop)/8;
            //2、避免出现小数造成死循环
            speed = speed<0?Math.floor(speed):Math.ceil(speed);
            //3、停止条件
            if(dest ==oDiv.offsetTop){
                clearInterval(timer);
                timer=null;
            }else {
                oDiv.style.top =  oDiv.offsetTop+speed+'px';
            }
            if(speed==-1){//-1时会颤抖，停止
                clearInterval(timer);
                timer=null;
            }
        },20)
    }

</script>
</body>
</html>

例3：多物体运动

多物体运动注意：定义自己定时器互不干扰，并把当前对象作为参数传入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体运动</title>
    <style>
        *{margin:0;padding:0;}
        div{width: 100px;background: #F00;display: block;height: 50px;margin-bottom:10px;}
    </style>
</head>
<body>
<div data-index="1"></div>
<div data-index="2"></div>
<div data-index="3"></div>
<script>
    var oDiv = document.getElementsByTagName('div');
    for(var i=0;i<oDiv.length;i++){
        oDiv[i].onmouseover=function(){
            animate(this,200)
        }
        oDiv[i].onmouseout=function(){
            animate(this,100)
        }
    }
    //多物体运动定义自己定时器，并把当前对象作为参数传入
    var timer = null;
    function animate(elem,dest){
        console.log(elem.getAttribute('data-index'))
        clearInterval(elem.timer);
        var speed = 0;
        elem.timer = setInterval(function(){
            speed = (dest - elem.offsetWidth)/8;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            if(elem.offsetWidth==dest){
                clearInterval(elem.timer);
            }else {
                elem.style.width = elem.offsetWidth+speed+'px';
            }
        },20)
    }
</script>
</body>
</html>