基于tween的个人动画库封装

在做动画之前我们需要搞清楚动画需要哪些变量

1：起步的位置（状态） begin

2：运动的终点 target

3：运动的距离 change=target-begin

4：运动所需的时总时间 duration

5：当前运动了多久 timer

当前所在的位置=timer/duration*change+begin

所以我们在写动画这个函数的时候，动画算法方面需要4这些参数

在tween算法中 ，算法 已经设计好了 我们只需要将timer duration change begin 这四个值传递进去 即可得到我们所需的当前位置的值，

除了算法，我们还需要了解 我们需要传递什么值给我们的动画的函数

1：指定运动的元素

2：运动的目的地即target

2：运动所需的时间 duration

3：可以传递也可以不传递 即回调函数，即当动画执行完 再执行的函数

了解了这些 那么我们写一个简单的动画

function animate(ele, attr, target, duration,fnCallBack) {
        var begin = getCss(ele, attr);
        var change = target - begin;
        var timer = 0;
        var interval = 15;
        window.clearInterval(ele.temp);
        function step() {
            timer += interval;
            if (timer >= duration) {
                ele.style[attr] = target + "px";
                window.clearInterval(ele.temp);
                ele.temp=null;
                if(typeof fnCallBack=="function"){
                    fnCallBack.call(ele);
                }
            } else {
                ele.style[attr] = timer / duration * change + begin + "px";
            }
        }
        ele.temp = window.setInterval(step, interval)
    }

这只是一个简单 的动画函数 ，具体依赖 tween 算法封装思路如下

我先前就在DOM库中写好了getCss 跟setCss两种方法

所以 获取初始的begin值 可以通过getCss获得

设置运动的位置可以由setCss负责

算法过程 可以将timer change duration begin四个值传递给tween算法库

下面我们来看一个稍微复杂点的动画封装

目的地 target 我们 不再传递一个值 而是一个对象 这样我们就可以实现多维的运动 代码如下

var oChange={};
    var oBegin={};
    var count=0;
    for(var attr in oTarget){
        var begin=parseFloat(DOM.getCss(ele,attr));
        var change=oTarget[attr]-begin;
        if(change){
            oBegin[attr]=begin;
            oChange[attr]=change;
            count++;
        }
    }
    if(!count) return;//如果成立即不需要运动 后面的代码也不需要执行

那么执行setCss的时候也是需要遍历的 具体怎么操作我就不详细的写了

想看我tween动画库的 可以私密我

版权声明：本文为博主原创文章，未经博主允许不得转载。