Framework Javascript Perfect Motion (analyse du code ligne par ligne, vous permettant de comprendre facilement les principes du mouvement)_compétences Javascript

Dès que vous entendrez le nom, vous saurez qu'avec ce framework, pratiquement tous les effets en ligne peuvent être obtenus. En fait, le cadre de mouvement précédent avait encore des limites, c'est-à-dire qu'il ne pouvait pas permettre à plusieurs valeurs de bouger ensemble.

Alors comment résoudre ce problème ? Jetons d'abord un coup d'œil à l'image de mouvement précédente

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);
}

Comment le modifier ? C'est en fait très simple. Dans le cadre précédent, vous ne pouviez transmettre qu'un seul style et une seule valeur à la fois. Alors maintenant, changez-les en un objet json. Je crois que tout le monde comprendra.

Quand on l'appelle, c'est startMove(oDiv,{width:200,height:200}); Si nécessaire, ajoutez une fonction de rappel. Voyons donc comment le code est modifié.

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);
}

Pourquoi y a-t-il l'hypothèse de bstop ?

En fait, si j'appelle startMove(oDiv,{width:101,height:200}); la largeur devient 101 et le mouvement est terminé, mais la hauteur n'a pas été atteinte, mais nous avons peut-être désactivé le minuterie actuelle. Le mouvement est terminé et un bug dans des circonstances particulières apparaîtra. Expliquez :

En fait, la minuterie doit être éteinte une fois tous les mouvements terminés. Par contre, s'il n'y a pas de panne, éteignez la minuterie. Le programme consiste à définir une valeur booléenne, qui est vraie au début, en supposant

Toutes les valeurs sont arrivées. S'il y a une valeur qui n'est pas égale au point cible, bstop est faux. Une fois le cycle complet terminé, si bstop est vrai, cela signifie que tous les mouvements sont terminés et la minuterie sera désactivée à ce moment-là.

Ensuite, ce framework de mouvement est fondamentalement terminé, applicable au CSS2 mais non applicable au CSS3.

Résumé :

L'évolution du cadre de mouvement

frame de mouvement startMove(iTarget)
startMove(obj,iTarget) plusieurs objets
startMove(obj,attr,iTarget) n'importe quelle valeur
startMove(obj,attr,iTarget,fn) mouvement en chaîne
startMove(obj,json,fn) mouvement parfait

O(∩_∩)OMerci ~