So implementieren Sie den Bewegungspufferungseffekt in JS (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Kapselungsfunktion von JS vor, um den Bewegungspufferungseffekt zu realisieren, einschließlich JavaScript-Zeitfunktion und numerischer Bedienungskenntnisse. Freunde in Not können sich darauf beziehen

Dieser Artikel beschreibt das Beispiel von JS um den Bewegungspufferungseffekt zu realisieren. Ich möchte es als Referenz mit Ihnen teilen:

Früher habe ich viele Bewegungsfunktionen geschrieben, aber später habe ich einen Weg gefunden, sie zu kapseln. (Bewegungspufferung).

/*
  物体多属性同时运动的函数
  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);
}

Die oben genannten gekapselten Funktionen können auch für einzelne Attribute und Bewegungen mit mehreren Stilen verwendet werden, wie zum Beispiel:

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

Das Obige ist das, was ich für alle zusammengestellt habe alle in der Zukunft.

Verwandte Artikel:

So ändern Sie den Wert eines bestimmten Elements in den von vue angeforderten Daten

JavaScript Starry Navigation Bar-Implementierung Methode

Detaillierte Erläuterung der Verwendung und Unterschiede von berechnet, filtert, get, set of vue.js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Bewegungspufferungseffekt in JS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!