js运动框架封装

发表于 | 分类于
| 字数： 564 | 时长： 3 min

代码已上传github

封装此框架有几个难点
1.你要使什么属性进行运动
2.获取当前属性的值
3.所有属性运动的单位是否相同如透明度opacity
4.兼容性问题

封装一个获取属性的函数并处理兼容性问题

获取属性:
ie:obj.currentStyle['attr'];
w3c 浏览器:window.getComputedStyle(obj,null)[attr];

上代码

1
2
3
4
5
6
7
8
9
10
11
function getStyle(obj, name)
{
    if(obj.currentStyle)//不兼容火狐和谷歌
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];//不兼容IE
    }
}

封装同时运动框架

前期工作准备好开始写真正的代码了

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
29
30
31
32
33
34
35
36
function startMove(obj, json, fnEnd) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true;        //假设：所有值都已经到了

        for (var attr in json) {
            var cur = 0;

            if (attr == 'opacity') { //如果是调整透明度 把透明的调整为100进制
                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            }
            else {
                cur = parseInt(getStyle(obj, attr));
            }
			//运动的值
            var speed = (json[attr] - cur) / 6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (cur != json[attr])
                bStop = false;

            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                obj.style.opacity = (cur + speed) / 100;
            }
            else {
                obj.style[attr] = cur + speed + 'px';
            }
        }

        if (bStop) {
            clearInterval(obj.timer);
            if (fnEnd) fnEnd();
        }
    }, 30);
}

使用方法startMove(div, {width: 200, height: 200, opacity: 30});示例

封装不同时运动框架

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
29
30
31
function startMove(obj, attr, iTarget, fnEnd) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var cur = 0;

        if (attr == 'opacity') {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        }
        else {
            cur = parseInt(getStyle(obj, attr));
        }

        var speed = (iTarget - cur) / 6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (cur == iTarget) {  //利用回到函数实现 执行完当前动画在执行下一个动画
            clearInterval(obj.timer);

            if (fnEnd) fnEnd();
        }
        else {
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                obj.style.opacity = (cur + speed) / 100;
            }
            else {
                obj.style[attr] = cur + speed + 'px';
            }
        }
    }, 30);
}

使用方法:示例

1
2
3
4
5
startMove(oDiv, 'width', 300, function () {
    startMove(oDiv, 'height', 300, function () {
         startMove(oDiv, 'opacity', 100);
    });
});

总结

原生的js运动框架就这样封装完了,尽管在封装时遇到很多bug,但是有一颗想解决问题的心就没有办不到的事没有解不了的bug。