Comment implémenter l'effet de mise en mémoire tampon de mouvement dans JS (tutoriel détaillé)

Cet article présente principalement la fonction d'encapsulation de JS pour réaliser l'effet de mise en mémoire tampon de mouvement, impliquant la fonction de temps JavaScript et les compétences opérationnelles liées aux opérations numériques. Les amis dans le besoin peuvent s'y référer

Cet article décrit l'exemple de JS. pour réaliser l'effet de tampon de mouvement. J'aimerais le partager avec vous pour votre référence. Les détails sont les suivants :

J'avais l'habitude d'écrire beaucoup de fonctions de mouvement, puis j'ai trouvé un moyen de les encapsuler. (mise en mémoire tampon de mouvement).

/*
  物体多属性同时运动的函数
  obj：运动的物体
  oTarget：对象，属性名为运动的样式名，属性值为样式运动的终点值
  ratio：速度的系数
*/
function bufferMove(obj, oTarget, fn,ratio = 8) {
  clearInterval(obj.iTimer);
  obj.iTimer = setInterval(function () {
    // 此处设定开关bBtn，假设所有的属性均已运动完毕true
    var bBtn = true;
    for(var sAttr in oTarget){
      // 获取当前值，此处兼容透明度的变化
      if(sAttr === 'opacity') {
        var iCur = parseFloat(getStyle(obj, sAttr) * 100);
      } else {
        var iCur = parseInt(getStyle(obj, sAttr));
      }
      // 计算速度，此处可判定方向，如向左或向右，先透明后出现或先出现后透明等
      var iSpeed = (oTarget[sAttr] - iCur) / ratio;
      iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
      // 计算下一次的值
      var iNext = iCur + iSpeed;
      // 赋值给对应样式
      if(sAttr ==='opacity') {
        obj.style.opacity = iNext / 100;
        obj.style.filter = 'alpha(opacity=' + iNext +')';
      } else {
        obj.style[sAttr] = iNext + 'px';
      }
      // 清除定时器，当前的位置和终点值是否相等，相等则说明结束
      if(iNext !== oTarget[sAttr]) {
        bBtn = false;
      }
    }
    // 如果bBtn的值为true，则说明所有的属性均已运动完毕，回调函数fn()
    if(bBtn) {
      clearInterval(obj.iTimer);
      if(fn){
        fn();
      }
    }
  }, 50);
}

Les fonctions encapsulées ci-dessus peuvent également être utilisées pour des attributs uniques et des mouvements multi-styles, tels que :

bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère. sera utile à tout le monde à l’avenir.

Articles associés :

Comment modifier la valeur d'un certain élément dans les données demandées par vue

Implémentation de la barre de navigation étoilée JavaScript méthode

Explication détaillée de l'utilisation et des différences de calculé, filtre, get, ensemble de vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!