多方向动画及动画库(4-1)

animation

闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 闭包
~ function() {
    // 单例封装
    var Linears = { //time,begin,change,duration
        Linear: function(t, b, c, d) {
            return b + t / d * c;
        }
    };
    function animate(curEle, targetObj, duration) {
                ……
        var curPosObj = Linears.Linear(time, beginObj[key], changeObj[key], duration);
                ……
    }
    window.animate = animate;//外面调用闭包函数
}();

多方向动画

  • [x] 多方向动画基础

  • 指定运动路线

    1
    2
    3
    4
    5
    6
    var totalLeft = targetLeft - beginLeft;
    var totalTop = targetTop - beginTop;
    //time,begin,change,duration
    function linear(t, b, c, d) { 
            return b + t / d * c;
    }

  • 每个方向的值实时改变

    1
    2
    3
    4
    var curLeft = linear(time, beginLeft, totalLeft, duration);
    var curTop = linear(time, beginTop, totalTop, duration);
    utils.setCss(box, 'top',curTop);
    utils.setCss(box, 'left',curLeft);

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function linear(t, b, c, d) { //time,begin,change,duration
        return b + t / d * c;
    }
    var box = document.getElementById('box');
    var beginLeft = utils.getCss(box, "left");
    var beginTop = utils.getCss(box, "top");
    var targetLeft = 500;
    var targetTop = 400;
    var totalLeft = targetLeft - beginLeft;
    var totalTop = targetTop - beginTop;
    var time = 0;
    var duration = 1000;
    box.timer = window.setInterval(function() {
        time += 10; //由于时间的改变导致其他维度值得变化
        if (time >= duration) {
            window.clearInterval(box.timer);
            utils.setCss(box, 'top', targetTop);
            utils.setCss(box, "left", targetLeft);
            window.clearInterval(box.timer);
            return;
        }
        var curLeft = linear(time, beginLeft, totalLeft, duration);
        var curTop = linear(time, beginTop, totalTop, duration);
        utils.setCss(box, 'top',curTop);
        utils.setCss(box, 'left',curLeft);
    }, 10);

  • [x] 自制简单多方向动画库animation.js

  • http://tool.css-js.com/ （压缩Uglify）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //方法的调用
    //animate("谁动","往哪里动","多久动完");
        // curEle:操作元素
        // targetObj：动画目标位置--->存储每个方向的目标位置{left:xxx,top:xxx,……}
        // duration:运行时间
     animate(box, {
            width: 100,
            height: 150,
            left: 100,
            top: 200,
            opacity: 0.2
        },1000);

  • [ ] 根据传递目标对象，获取对应

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //根据targetObj获取起始值beginObj和totalObj（taget里的方向和begin、total的方向对应）
    var beginObj = {},
        changeObj = {};
    for (var key in targetObj) { //key就是对象里的方向
        if (targetObj.hasOwnProperty(key)) {
            beginObj[key] = utils.css(curEle, key);
            changeObj[key] = targetObj[key] - beginObj[key];
        }
    }

  • [ ] 实现多方向的运动动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    curEle.animateTimer = window.setInterval(function() {
        time += 5;
        // 到达目标结束动画，（批量）当前元素的样式=目标样式
        if (time >= duration) {
            utils.css(curEle, targetObj);
            window.clearInterval(curEle.animateTimer);
        }
        // 没到达目标，每个位置设置
        for (var key in targetObj) { //key就是对象里的方向
            if (targetObj.hasOwnProperty(key)) {
                var curPosObj = Linears.Linear(time, beginObj[key], changeObj[key], duration);
                utils.css(curEle, key, curPosObj);
            }
        }
    }, 10);
    }