多值动画封装

作者: daisx | 来源:发表于2017-05-04 08:12 被阅读0次

多值动画封装
10.3缓动多值动画的封装
vue零基础开发028——Vue中的动画封装
Day15（JS动画，JS获取CSS属性，demo 导航缓动）
18.vue中的动画封装
ios - 原生骨架屏，网络加载过渡动画的封装
Animation
16-第十六章运动(下)
UIView动画
UIView动画和Calayer动画

在单值动画中，一次只能改变其中的单个量，比如left、width、height~~~
如果需要一次改变多的量，就需要传入多个变量，在多变量传输中，一般选择用数组或者json。这里选择用json的键值对便于程序的开发和维护。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {  margin: 0;  padding: 0;  }
        div{  width: 100px;  height: 100px;  background: red;  position: absolute;  }
    </style>
</head>
<body>
<button id="btn">开始动画</button>
<!--<button id="btn1">改变高度</button>-->
<div id="box"></div>
<script>
    window.onload = function () {
        function $(TagId){return document.getElementById(TagId);}
        var box=$("box");
        var btn=$("btn");
        var btn1=$("btn1");
        btn.onclick=function(){
            buffer(box,{width:400,left:400,height:400})
        };
        function buffer(obj,json){
            clearInterval(obj.timer);

                obj.timer = setInterval(function () {
                    for(var key in json ) {
                        var begin = parseInt(getCss(obj, key));
                        var target = parseInt(json[key]);
                        var speed = (target - begin) / 10;
                        speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
                        begin = begin + speed;
                        box.style[key] = begin + "px";
                        if (begin == target) {
                            clearInterval(obj.timer)
                        }
                    }
                }, 20)
        }
        function getCss(obj,attr){
            if(obj.currentStyle){
                return  obj.currentStyle[attr];
            }else{
                return   window.getComputedStyle(obj,null)[attr];
            }
        }
    }
</script>
</body>
</html>

在多值动画会存在一个问题：如果其中一个值在满足if (begin == target)条件后，会被立刻清空定时器。而停止动画，而其余只无法达到目标值。

利用布尔条件设置一个判定条件来将定时器清空

       function buffer(obj,json){
            clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var flag=true;
                    for(var key in json ) {
                        var begin = parseInt(getCss(obj, key));
                        var target = parseInt(json[key]);
                        var speed = (target - begin) / 10;
                        speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
                        begin = begin + speed;
                        box.style[key] = begin + "px";
                        if(begin!=target)
                        {flag=false;
                    }
                          if (flag==true) {
                            clearInterval(obj.timer)
                        }
                }, 20)
        }

特殊情况考虑：函数回调；

在某些特殊情况下，动画需要复原，或者需要连续运动，会使用到一个函数回调的概念。

 function buffer(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var flag = true;
                for (var key in  json) {
                    var begin = parseInt(getCssAttr(obj, key));
                    var target = parseInt(json[key]);
                    var speed = (target - begin) * 0.2;
                    speed = target > obj.offsetLeft ? Math.ceil(speed) : Math.floor(speed);
                    obj.style[key] = begin + speed + 'px';
                    if (begin != target) {
                        flag = false;
                    }
                }
                if (flag == true) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 20)
        }