原生JS(一)：封装运动框架

核心思想

JS动画本质是利用setinterval模拟打关键帧，每一次调用修改speed控制缓冲运动的速度

注意点

• 获取style

  通常的直接style.attr 只能获取到内部样式，内嵌和外部样式无法获取，所以需要用getComputedStyle(obj, false)[attr] (火狐，谷歌)或者 currentstyle(IE)

  封装后如下所示：

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

• 设置透明度

  IE和谷歌也有区别

  filter:alpha(opacity:30);   
  opacity: 0.3;

动画框架实现

• 接收三个参数 obj,json,fn。 分别指向动画作用对象，属性最终结果，回掉。

• 每一个对象对应一个timer

• 每一个timer的操作中，需要对传入的所有属性进行遍历，只要有一个属性没有到预定的值，便把flag置为false

• 由于属性只能为整数，所以speed需要进行四舍五入

• 由于opacity的特殊性，需要单独判断

  完整代码如下：

    //同时运动框架
    function startMove(obj, json, fn) {
        clearInterval(obj.timer);//清除定时器，避免重复生成多个定时器
        obj.timer = setInterval(function () {
            var flag = true;//假设刚开始时所有运动都已完成
            for (var attr in json) {//遍历json
                var icur = null;
//1.判断类型
                if (attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
//2.算速度
                var speed = (json[attr] - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测停止
                if (icur != json[attr]) {
                    flag = false;
                }
                if (attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
            if (flag) {//当所有运动都完成时，清除定时器
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }, 30);
    }

赏

谢谢你请我吃糖果