Partage de fonctions encapsulées pour obtenir un effet de mise en mémoire tampon de mouvement à l'aide de JS

Cet article vous présente principalement la fonction d'encapsulation de JS pour obtenir un effet de 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, j'espère que cela pourra vous aider.

J'avais l'habitude d'écrire beaucoup de fonctions de mouvement, mais plus tard 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 d'encapsulation 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);

C'est tout.

Recommandations associées :

Exemple d'implémentation JavaScript du framework de mouvement de mise en mémoire tampon

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!