Detailliertes Beispiel für das Hinzufügen einer Animation zu einem einzelnen DOM-Element

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich die damit verbundenen Probleme beim Bedienen von Dom-Elementen zum Hinzufügen von Animationseffekten vorstellt. Ich hoffe, es wird für alle hilfreich sein. 🔜

    <div id="box"></div>

Drei Elemente der Bewegung

Startpunkt

Der Startpunkt einer Bewegung ist eigentlich die Position des aktuellen Elements über die API und lässt diese Position dienen als Beginn der Bewegung.

Ziel

t = setInterval(function(){终止条件})

Geschwindigkeit

• Das zugrunde liegende Bewegungsprinzip

Lassen Sie das Element den CSS-Attributwert in einem kurzen Intervall über den Timer ändern

Eine solche kontinuierliche Bewegung erscheint dem Benutzer als Animationseffekt

DOM-Animationseffektkapselung

• Die Hauptfunktion der Kapselung besteht darin, Elementen zu ermöglichen, ihre Attribute innerhalb eines kurzen Zeitintervalls kontinuierlich zu ändern, um Animationseffekte zu erzielen.

• Einzelattribut-Bewegungsrahmen:

    var box = document.getElementById("box");
    var t = null;
    t = setInterval(function(){
        
    })

Gleichmäßige Bewegungskapselung

•     // 元素的属性值 === 目标点
      if(dom.attr === target){
          clearInterval(t);
      }

• Kompatibel mit Transparenz

<button id="btn">开始运动</button>
<div id="box"></div>
<div id="line"></div>
<script>
    var  box = document.getElementById("box");
    var  btn = document.getElementById("btn");
    var  target = 500;
    // 速度可以根据 起始点和目标点进行判断，从而决定正负; 
    var speed  = 17;
    // - 方向; 
    btn.onclick = function(){
        // 1. 获取元素初始位置;
        var _left = box.offsetLeft;
        speed  = target - _left >= 0 ? speed : -speed ;
        var interval = setInterval( function(){
            // 4. 判定运动的终止条件; 
            if(Math.abs(target - _left) <= Math.abs(speed) ){
                // 因为终止时有可能没有到达目标点，因此我们把元素赋值到目标点位置; 
                box.style.left = target + "px";
                clearInterval( interval );
            }else{
                // 2. 元素根据初始位置进行改变; 
                _left += speed;
                // 3. DOM操作，根据已有数据让元素属性发生改变; 
                box.style.left = _left + "px";
            }
        } , 30)
    }
    </script>

Pufferbewegung

Pufferbewegung ist eine Art der Bewegung

Diese Bewegungsart ist eine Bewegung, bei der sich die Geschwindigkeit während der Bewegung ändert

Je kleiner der Abstand, desto kleiner die Geschwindigkeit

• <script>// - 提取属性名作为参数; btn.onclick = function(){
      animate( "left", 500 )}function animate( attr , target , speed = 10 ){
      // 1. 获取元素初始样式
      var _style = getComputedStyle( box );
      // 2. 根据属性要求取出当前的属性的属性值; 
      var _css_style = parseInt(_style[attr]);
      speed  = target - _css_style >= 0 ? speed : -speed ;
      var interval = setInterval( function(){
          // 4. 判定运动的终止条件; 
          if(Math.abs(target - _css_style) <= Math.abs(speed) ){
              // 因为终止时有可能没有到达目标点，因此我们把元素赋值到目标点位置; 
              box.style[attr] = target + "px";
              clearInterval( interval );
          }else{
              // 2. 元素根据初始位置进行改变; 
              _css_style += speed;
              // 3. DOM操作，根据已有数据让元素属性发生改变; 
              box.style[attr] = _css_style + "px";
          }
      } , 30)}</script>

Multi-Attribut-Bewegungsframework (Erweiterung)

• Multi-Attribut-Bewegungsframework

Wenn wir animieren mehrmals aufrufen, öffnen wir mehrere Timer

• Da die Daten in den Timern gleich sind, haben wir Ich kann den Effekt nicht erkennen.
  • Aber das mehrmalige Einschalten des Timers verbraucht extrem die Computerleistung.
  • Schließen Sie den vorherigen Timer, bevor Sie den aktuellen Timer einschalten
  Projekthintergrund
  : Um Benutzer zum Herunterladen aufzufordern, ist hier ein Dom, der zum Herunterladen auffordert. Ich wollte ihn ursprünglich zu jeder Tableiste hinzufügen (insgesamt vier). des Spiels wie folgt:

Der Effekt ist wie folgt

:

• Gehen Sie direkt zum Code:

• <script>function animate( dom , attr , target , speed = 10 ){
      // 1. 获取元素初始样式
      var _style = getComputedStyle( dom );
      // 2. 根据属性要求取出当前的属性的属性值; 
      if( attr === "opacity"){
          var _css_style = parseInt(_style[attr] * 100 );
          target *= 100;
      }else{
          var _css_style = parseInt(_style[attr]);
      }
      speed  = target - _css_style >= 0 ? speed : -speed ;
      var interval = setInterval( function(){
          // 4. 判定运动的终止条件; 
          if(Math.abs(target - _css_style) <= Math.abs(speed) ){
              // 因为终止时有可能没有到达目标点，因此我们把元素赋值到目标点位置; 
              if( attr === "opacity"){
                  dom.style[attr] = target / 100;
              }else{
                  dom.style[attr] = target + "px";
              }
              clearInterval( interval );
          }else{
              // 2. 元素根据初始位置进行改变; 
              _css_style += speed;
              // 3. DOM操作，根据已有数据让元素属性发生改变; 
              if( attr === "opacity"){
                  dom.style[attr] = _css_style / 100 ;
              }else{
                  dom.style[attr] = _css_style + "px";
              }
          }
      } , 30)}</script>

• Erstellen Sie Knoten durch Code und rufen Sie ihn einfach auf, wenn die Anwendung gestartet wird ;

Über js, um die Transformationsanimation festzulegen. Die Kanten wurden in 3D-Form geändert.

<button id="btn">开始运动</button>
<div id="box"></div>
<script>
var  box = document.getElementById("box");
var  btn = document.getElementById("btn");
btn.onclick = function(){
    animate( box , "left" , 500 )
}
function animate( dom , attr , target , transition = "buffer", speed = 10 ){
    var _style = getComputedStyle( dom );
    if( attr === "opacity"){
        var _css_style = parseInt(_style[attr] * 100 );
        target *= 100;
    }else{
        var _css_style = parseInt(_style[attr]);
    }     
      
    if( transition === "liner"){
        speed  = target - _css_style >= 0 ? speed : -speed ;
    }
      
    var interval = setInterval( function(){
        if( transition === "buffer"){
            // 计算速度; 
            speed = (target - _css_style) / 10;
            //速度不取整在小数部分会做很多无意义的计算; 
            speed = speed > 0 ? Math.ceil(speed) :Math.floor( speed )
        }

        if(Math.abs(target - _css_style) <= Math.abs(speed) ){
            // 因为终止时有可能没有到达目标点，因此我们把元素赋值到目标点位置; 
            if( attr === "opacity"){
                dom.style[attr] = target / 100;
            }else{
                dom.style[attr] = target + "px";
            }
                clearInterval( interval );
        }else{
            // 2. 元素根据初始位置进行改变; 
            _css_style += speed;
            // 3. DOM操作，根据已有数据让元素属性发生改变; 
            if( attr === "opacity"){
                dom.style[attr] = _css_style / 100 ;
            }else{
                dom.style[attr] = _css_style + "px";
            }
        }
    } , 30)
}     
</script>
//只需要改变里面transition的值就可以调整运动模式
//buffer为缓冲运动
//liner为匀速运动

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für das Hinzufügen einer Animation zu einem einzelnen DOM-Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!