javascript匀速动画和缓冲动画

时间 2019-12-07

原文原文链接

关于网页中的动画，在css3中咱们已经可使用一些属性快速的作出来，可是有时候为了浏览器的兼容性咱们仍是须要使用js来制做网页中的动画。javascript

使用js作动画最重要的一个函数就是setInterval函数，这里再也不赘述，不懂能够直接百度用法。本文主要讲动画的原理已经在制做过程当中的要点。css

老规矩，先上代码，能直接看懂的能够节省时间。html

html部分：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>move</title>
    <link rel="stylesheet" href="move1.css">
</head>
<body>
    <input type="button" value="匀速移动" id="move1">
    <input type="button" value="渐变移动" id="move2">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <script type="text/javascript" src="move1.js"></script>
</body>
</html>

css部分：

*{
    margin: 0px;
    padding: 0px;
}
.box{
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
    margin-top: 10px;
}

js部分：

/**
 * Created by siri on 2016/9/10.
 */
window.onload=function () {
    var btn1 = document.getElementById('move1');
    var btn2 = document.getElementById('move2');
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    btn1.onclick = function () {
        animate1(box1,500);
    }
    btn2.onclick = function () {
        animate2(box2,500);
    }
    //匀速动画
    function animate1(ele,target){
        //要用定时器，先清除定时器
        //一个盒子只能有一个定时器，这样儿的话，不会和其余盒子出现定时器冲突
        //而定时器自己讲成为盒子的一个属性
        clearInterval(ele.timer);
        //咱们要求盒子既能向前又能向后，那么咱们的步长就得有正有负
        //目标值若是大于当前值取正，目标值若是小于当前值取负
        var speed = target>ele.offsetLeft?3:-3;
        ele.timer = setInterval(function () {
            //在执行以前就获取当前值和目标值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //目标值和当前值只差若是小于步长，那么就不能再前进了
            //由于步长有正有负，全部转换成绝对值来比较
            console.log(val);
            if(Math.abs(val)<=Math.abs(speed)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);

            }
        },30);
    }

    //缓动动画封装
    function animate2(ele,target) {
        clearInterval(ele.timer); //清楚历史定时器
        ele.timer = setInterval(function () {
            //获取步长 肯定移动方向(正负值) 步长应该是愈来愈小的，缓动的算法。
            var step = (target-ele.offsetLeft)/10;
            //对步长进行二次加工(大于0向上取整,小于0项下取整)
            step = step>0?Math.ceil(step):Math.floor(step);
            //动画原理： 目标位置 = 当前位置 + 步长
            console.log(step);
            ele.style.left = ele.offsetLeft + step + "px";
            //检测缓动动画有没有中止
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                ele.style.left = target + "px"; //直接移动指定位置
                clearInterval(ele.timer);
            }
        },30);
    }


}

html和css基本就是为了咱们的js部分搭框架，不讲太多， 要注意的是，必定要对全局的margin和padding清零，不然的话他在计算的时候初始的margin和padding会影响计算，从而致使有时候运动不中止的状况。

javascript部分代码的解析在源码中已经很详细了，下面主要讲解原理。css3

匀速运动：算法

经过setInterval函数咱们控制每多少毫秒运动的距离，而后在快要到达指定位置的时候，判断步长（每多少毫秒运动的距离）和此时和目标位置的距离，若是步长大于此时和目标位置的距离，则直接定位到目标位置，这样作是为了不步长和总距离不是整数倍关系而产生最后到达位置和目标位置有差值的错误。浏览器

缓冲运动：框架

缓冲运动的基本函数是和匀速运动同样的，只是缓冲运动的步长咱们是经过和目标位置的距离来肯定的，这样咱们的步长是不断变小的，从而实现缓冲运动的效果。在肯定步长的时候咱们使用Math.ceil和Math.floor对步长值进行取整是为了不出现小数，由于若是出现小数后面最后到达的位置确定是和目标位置有偏差的。函数

注意事项：在每次移动开始前必定要使用clearInterval清除定时器。动画