大数据

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 框架下载