缓动动画原理 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #demo{
            width:100px;
            height:100px;
            background-color: pink;
            position:absolute;
            top:50px;
            left:0px;
        }
    </style>
</head>
<body>
<button id="btn">开始</button>
<div id="demo"></div>
</body>
</html>
<script>
    
    var demo=document.getElementById("demo");
    var btn=document.getElementById("btn");
    var timer=null;
    var target=400;
    btn.onclick=function () {
        timer=setInterval(function(){
            var step=(target-demo.offsetLeft)/10;  //步长
            step=step>0 ? Math.ceil(step) : Math.floor(step); //取整步长
            demo.style.left=demo.offsetLeft+step+"px";//缓动动画原理：盒子本身的位置+步长（不断变化的）
            if(demo.offsetLeft==target)
            {
                clearInterval(timer);
            }
        },10)


    }
</script>

　　

缓动效果原理：

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1，让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

2，核心算法：（目标值-现在的位置）/10 作为每次移动的距离  步长

timer=setInterval(function(){
   var step=(target-demo.offsetLeft)/10
   demo.style.left=demo.offsetLeft + step +"px";
},10)

3，停止的条件是：让当前盒子位置等于目标位置就停止定时器

if(demo.offsetLeft == target)
{
   clearInterval(timer);
}

4，注意步长值需要取整  判断步长是正值还是负值，如果是正值，步长往大了取整，如果是负值, 步长向小了取整

step = step >0 ? Math.ceil(step) : Math.floor(step);

 

posted @ 2019-07-27 20:41  shanlu  阅读(380)  评论(0)  编辑  收藏  举报