JS基础之运动框架，能实现常用动画效果_js运动框架动画效果-CSDN博客

本文链接：https://blog.csdn.net/u014035151/article/details/52119598
举例

附带注释，轻松了解实现原理。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #demo{
        width:100px;
        background-color:red;
        position:absolute;
    }
    #demo1{
        width:100px;
        background-color:blue;
        position:absolute;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        var demo = document.getElementById("demo");
        var demo1 = document.getElementById("demo1");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            animate(demo, {
                "width" : 300,
                "height" : 500,
                "zIndex" : 3
            }, function(){
                animate(demo1, {
                    "width" : 200,
                    "height" : 400,
                    "zIndex" : 4
                })
            })
        }
        //兼容获取样式
        /*currentStyle：可用来查询/修改外联或者内部样式表中的样式（仅IE8及以下）。
         getComputedStyle：用于Firefox、Chrome、Safari、Opera等高级浏览器，作用与currentStyle相同。*/
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj,false)[attr];
            }
        }
        /*JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

         格式：
         json = {name:key,name1:key2}
         for-in循环，遍历json对象，i属性，json[i]属性值
         for(var i in json){
         alert(i);//弹出name值
         alert(json[i]);//弹出key值}*/
        function animate(obj, json, fn){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                //定一个标识来判断是否所有属性已经执行完。
                var flag = true;
                for(var key in json){
                    if(key == "opacity"){
                        // 如果当前属性没有值，或者没有属性的话，可以再添加一个默认值0
                        //将值乘以100方便计算
                        var leader = parseInt(getStyle(obj, key) * 100) || 0;//初始值
                        var target = json[key] * 100;//目标值
                        var step = (target - leader) / 10;
                        //三元运算符，a>b?true:false;如果a>b，结果为true,执行true的代码，反之为false
                        //如果step>0,则向上取整，不然速度在为小于1时，浏览器会四舍五入，导致无法到达目标值，反之，step<0,向上取整，一样。
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);
                        leader += step;
                        obj.style[key] = leader / 100;
                        obj.style.filter = 'alpha(opacity:' + (leader / 100) + ')';

                    } else if(key == "zIndex"){
                        //层级
                        var leader = parseInt(getStyle(obj, key)) || 0;
                        var target = json[key];
                        var step = (target - leader) / 10;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);
                        leader = leader + step;
                        obj.style[key] = target;
                    } else {
                        //普通属性值，宽高之类的
                        var leader = parseInt(getStyle(obj, key)) || 0;
                        var target = json[key];
                        var step = (target - leader) / 10;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);
                        leader = leader + step;
                        obj.style[key] = leader + 'px';
                    }
                    // 因为对象当前的位置会到达指定的目标位置
                    // 如果还有一个属性没有达到目标值的时候，就不能清空定时器
                    if(target != leader){
                        flag = false;
                    }
                }
                if(flag){
                    clearInterval(obj.timer);
                    // 回调的函数的作用，是里面还有很多的其它代码，当上面的代码都执行完了之后，再来执行回调函数里面的代码
                    if(fn){
                        fn();
                    }
                }
            }, 15)
        }
    }
</script>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="demo" style="height: 100px;"></div>
<div id="demo1" style="height: 100px;"></div>
</body>
</html>