Javascript perfect motion framework (analyzing the code line by line, allowing you to easily understand the principles of motion)_javascript skills

As soon as you hear the name, you will know that with this framework, basically all online effects can be achieved. In fact, the previous motion framework still had limitations, that is, it could not allow several values ​​​​to move together.

So how to solve this problem? Let’s first take a look at the previous motion frame

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


function startMove(obj, attr, iTarget) {
  clearInterval(obj.time);
  obj.time = 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.time);
    } 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);
}

How to modify it? It's actually very simple. In the past framework, you could only pass one style and one value at a time. So now change these into a json object. I believe everyone will understand.

When we call it, it is startMove(oDiv,{width:200,height:200}); If necessary, add a callback function. So let’s take a look at how the code is modified.

function startMove(obj, json, fnEnd)
{
  var MAX=18;
  //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)
  //并且关闭或者开启都是当前物体的定时器，已防止与页面上其他定时器的冲突，使每个定时器都互不干扰 
  clearInterval(obj.timer); 
  obj.timer=setInterval(function (){
    
    var bStop=true; // 假设：所有的值都已经到了
    
    for(var name in json)
    {
      var iTarget=json[name]; // 目标点
      
      //处理透明度，不能使用parseInt否则就为0了 
      
      if(name=='opacity')
      {
        
        // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入
        var cur=Math.round(parseFloat(getStyle(obj, name))*100); 
      }
      else
      {
        var cur=parseInt(getStyle(obj, name)); // cur 当前移动的数值
      }
      
      var speed=(iTarget-cur)/5; // 物体运动的速度 数字越小动的越慢 /5 : 自定义的数字
      
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      
      if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;
      
      if(name=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
        obj.style.opacity=(cur+speed)/100; //ff chrome
      }
      else
      {
        obj.style[name]=cur+speed+'px';
      }
      
      // 某个值不等于目标点 
      if(cur!=iTarget)
      {
        bStop=false;
      }
    }
    
    // 都达到了目标点
    if(bStop)
    {
      clearInterval(obj.timer);
      
      if(fnEnd) //只有传了这个函数才去调用
      {
        fnEnd();
      }
    }
  }, 20);
}

Why is there the assumption of bstop?

In fact, if I call startMove(oDiv,{width:101,height:200}); the width becomes 101 and the movement has been completed, but the height has not been reached, but we may have turned off the current timer. The movement has ended, and a bug under special circumstances will appear. Explain:

Actually speaking, the timer needs to be turned off after all the movements have been completed. On the other hand, if there is no failure, then turn off the timer. The program is to define a Boolean value, which is true at the beginning, assuming

All values ​​have arrived. If there is a value that is not equal to the target point, bstop is false. After the entire cycle ends, if bstop is true, it means that all movements are completed, and the timer will be turned off at this time.

Then this motion framework is basically completed, applicable to css2 but not applicable to css3.

Summary:

The evolution of motion framework

startMove(iTarget) motion frame
startMove(obj,iTarget) multiple objects
startMove(obj,attr,iTarget) any value
startMove(obj,attr,iTarget,fn) chain motion
startMove(obj,json,fn) perfect movement

O(∩_∩)OThank you ~