Detaillierte Erläuterung der einheitlichen JavaScript-Animation und der Pufferanimation-js-Tutorial-php.cn

Detaillierte Erläuterung der einheitlichen JavaScript-Animation und der Pufferanimation

高洛峰

Freigeben： 2016-12-09 15:21:36

Original

1539 Leute haben es durchsucht

Was Animationen auf Webseiten betrifft, können wir in CSS3 bereits einige Attribute verwenden, um sie schnell zu erstellen, aber manchmal müssen wir aus Gründen der Browserkompatibilität immer noch js verwenden, um Animationen auf Webseiten zu erstellen.

Die wichtigste Funktion für die Verwendung von js zum Erstellen von Animationen ist die setInterval-Funktion. Wenn Sie sie nicht verstehen, können Sie sie direkt in Baidu verwenden. In diesem Artikel geht es hauptsächlich um die Prinzipien der Animation und die wichtigsten Punkte im Produktionsprozess.

Die alte Regel besteht darin, zuerst den Code zu schreiben. Wenn Sie ihn direkt verstehen können, können Sie Zeit sparen.

HTML-Teil:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>move</title>
  <link rel="stylesheet" href="move1.css">
</head>
<body>
  <input type="button" value="匀速移动" id="move1">
  <input type="button" value="渐变移动" id="move2">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <script type="text/javascript" src="move1.js"></script>
</body>
</html>

Nach dem Login kopieren

CSS-Teil:

   
*{
  margin: 0px;
  padding: 0px;
}
.box{
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
  margin-top: 10px;
}

Nach dem Login kopieren

js-Teil:

/**
 * Created by siri on 2016/9/10.
 */
window.onload=function () {
  var btn1 = document.getElementById(&#39;move1&#39;);
  var btn2 = document.getElementById(&#39;move2&#39;);
  var box1 = document.getElementById(&#39;box1&#39;);
  var box2 = document.getElementById(&#39;box2&#39;);
  btn1.onclick = function () {
    animate1(box1,500);
  }
  btn2.onclick = function () {
    animate2(box2,500);
  }
  //匀速动画
  function animate1(ele,target){
    //要用定时器，先清除定时器
    //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
    //而定时器本身讲成为盒子的一个属性
    clearInterval(ele.timer);
    //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
    //目标值如果大于当前值取正，目标值如果小于当前值取负
    var speed = target>ele.offsetLeft?3:-3;
    ele.timer = setInterval(function () {
      //在执行之前就获取当前值和目标值之差
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      //目标值和当前值只差如果小于步长，那么就不能再前进了
      //因为步长有正有负，所有转换成绝对值来比较
      console.log(val);
      if(Math.abs(val)<=Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
  
      }
    },30);
  }
  
  //缓动动画封装
  function animate2(ele,target) {
    clearInterval(ele.timer); //清楚历史定时器
    ele.timer = setInterval(function () {
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
      var step = (target-ele.offsetLeft)/10;
      //对步长进行二次加工(大于0向上取整,小于0项下取整)
      step = step>0?Math.ceil(step):Math.floor(step);
      //动画原理： 目标位置 = 当前位置 + 步长
      console.log(step);
      ele.style.left = ele.offsetLeft + step + "px";
      //检测缓动动画有没有停止
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
        ele.style.left = target + "px"; //直接移动指定位置
        clearInterval(ele.timer);
      }
    },30);
  }
  
  
}

Nach dem Login kopieren

HTML und CSS sind im Grunde das Framework für unseren JS-Teil. Worauf Sie achten müssen, werde ich nicht sagen Wichtig ist, dass Sie die Gesamtsituation verstehen. Löschen Sie den Rand und den Abstand auf Null. Andernfalls wirken sich der anfängliche Rand und der Abstand während der Berechnung auf die Berechnung aus, was zu einer Unterbrechung der Bewegung führen kann.

Die Analyse des JavaScript-Teils des Codes ist bereits im Quellcode sehr detailliert. Im Folgenden wird hauptsächlich das Prinzip erläutert.

Gleichmäßige Bewegung:

Über die setInterval-Funktion steuern wir alle paar Millisekunden die Bewegungsdistanz und bestimmen dann, wann wir im Begriff sind, die angegebene Position zu erreichen die Schrittlänge (Bewegung alle paar Millisekunden) und der Abstand zwischen dieser Zeit und der Zielposition. Wenn die Schrittlänge größer als die Entfernung zwischen dieser Zeit und der Zielposition ist, wird sie direkt auf die Zielposition positioniert Dies wird durchgeführt, um zu vermeiden, dass die Schrittlänge und die Gesamtentfernung nicht ganzzahlige Vielfache sind und die endgültige Ankunftsposition einen Fehler in der Differenz zwischen der Zielposition und der Zielposition ergibt.

Pufferbewegung:

Die Grundfunktion der Pufferbewegung ist die gleiche wie die einer gleichmäßigen Bewegung, mit der Ausnahme, dass die Schrittlänge der Pufferbewegung durch den Abstand von der Zielposition bestimmt wird Wir Die Schrittgröße wird ständig kleiner, wodurch der Effekt einer Pufferbewegung erzielt wird. Bei der Bestimmung der Schrittgröße verwenden wir Math.ceil und Math.floor, um den Schrittwert zu runden und Dezimalstellen zu vermeiden, denn wenn es Dezimalstellen gibt, wird die erreichte Endposition definitiv von der Zielposition abweichen.

Hinweis: Stellen Sie sicher, dass Sie „clearInterval“ verwenden, um den Timer vor jedem Zug zu löschen.