JS运动搞不定 你缺少一个运动框架而已

写在前面 初学者 大家一起学习 有不对的请指出哦~

1.jpg

01

---

可以解决的运动

• 元素的上下左右匀速 缓冲运动
• 图片的透明度变化
• 图片轮播
• 元素高度 宽度 边框像素的变化
• 适用于多个物体运动以及链式运动
• 改变元素的位置

02

---

辅助函数

需要用到的一个小函数，当我们获取样式时，通过 Elements.style.attribute 只能获取到行间样式 ，而我们需要操作的大都是css代码内的，所以使用这个函数

• 参数：
• obj 元素
• attr 属性
• 返回值： 属性值

function getStyle(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

03

---

运动框架

• 参数：

• obj 元素

• json json数组 形如｛width：300，height：300｝

• endFun 当前运动完成后执行的函数

• 定时器作为** obj **的属性，避免了多个物体运动时导致关闭定时器错误，运动终止。

• json数组可以传递多个参数，可以同时改变多个属性值

• endFun 可以实现链式运动，一个运动运动后结束开启其他运动

function startMove(obj, json, endFun) {
    //开始前关闭之前obj上的定时器
    clearInterval(obj.timer); 

    //定时器
    obj.timer = setInterval(function() {

        var bStop = true; //假设所有值都到目标
        for(var attr in json) {//循环json数组
            
            //单独处理透明度
            if(attr == 'opacity') {
                var cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                var 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.opacity = (cur + speed) / 100;
                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
            } else {
                obj.style[attr] = cur + speed + 'px';
            }
        }
        //所有的都到达目标值
        if(bStop) {
            clearInterval(obj.timer);
            if(endFun) endFun();
        }
    }, 30);  }

04

---

使用

1. 引入JS
2. 在你需要的地方使用startMove（）函数
3. 这里只是展示一个简单的小例子，其实可以用的远比这多，图片从高度的运动，能使得图片看上去是从上往下的 等等

05

---

Move.js 框架下载