Comment l'effet d'animation de rebond JavaScript est-il implémenté ?-js tutoriel-php.cn

Comment l'effet d'animation de rebond JavaScript est-il implémenté ?

零下一度

Libérer： 2017-07-16 15:25:18

original

1206 Les gens l'ont consulté

JavaScriptComment obtenir l'effet d'animation de rebond ? Laissez-moi vous le présenter en détail à travers le code.

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{
      width:200px;
      height:200px;
      position: absolute;
      top:0;
      left:200px;
      background:lightblue;
    }
    .btn{
      position:absolute;
      top:200px;
      left:100px;
      height:50px;
    }
    .btn input{
      display:inline-block;
      margin-left:50px;
      outline: none;
      width:100px;
      height:50px;
      border:1px solid green;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <p id=&#39;box&#39;></p>
  <p class=&#39;btn&#39;>
    <input type="button" value=&#39;向左&#39; id=&#39;btnLeft&#39;>
    <input type="button" value=&#39;向右&#39; id=&#39;btnRight&#39;>
  </p>
  <script>
    var oBox = document.getElementById("box");
    var minLeft = 0;
    var maxLeft = utils.win(&#39;clientWidth&#39;)-oBox.offsetWidth;
    var step = 5;
    var timer = null;
    function move(target){
      //target:告诉我要运动的目标位置
      window.clearTimeout(timer);
      var curLeft = utils.css(oBox,"left");
      if(curLeft<target){//向右走
        if(curLeft+step>target){//边界
          utils.css(oBox,"left",target);
          return;
        }
        curLeft+=step;
        utils.css(oBox,"left",curLeft)
      }else if(curLeft>target){//向左走
        if(curLeft-step<target){//边界
          utils.css(oBox,"left",target);
          return;
        }
        curLeft-=step;
        utils.css(oBox,"left",curLeft)
      }else{//不需要运动
        return;
      }
      // timer = window.setTimeout(move,10)//这里有一个问题，点击按钮第一次target的值是有的，但是第二次通过setTimeout执行的时候没有给target进行传值。是undefined
      timer = window.setTimeout(function(){
        move(target);
      },10)//这样使用匿名函数包裹一下，就解决了上面的问题，但是这样写性能不好，因为每一次到达时间的时候，都需要执行一次匿名函数（形成一个私有的作用域）,在匿名函数中再执行move，但是move中需要用到的数据值在第一次执行的move方法中，需要把匿名函数形成的这个私有的作用域作为跳板找到之前的，这样就导致了匿名函数形成的这个私有的作用域不能销毁
    }
    document.getElementById(&#39;btnLeft&#39;).onclick = function(){
      move(minLeft)
    }
    document.getElementById(&#39;btnRight&#39;).onclick = function(){
      move(maxLeft)
    }
  </script>
</body>
</html>

Copier après la connexion

Afin de résoudre le problème de mauvaises performances ci-dessus, voici un code optimisé : un package de fonctions y est utilisé, de sorte qu'il n'est qu'un créé par la fonction move. La portée privée n'est pas détruite. Lorsque _move est exécuté, move sera naturellement détruit.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{
      width:200px;
      height:200px;
      position: absolute;
      top:0;
      left:200px;
      background:lightblue;
    }
    .btn{
      position:absolute;
      top:200px;
      left:100px;
      height:50px;
    }
    .btn input{
      display:inline-block;
      margin-left:50px;
      outline: none;
      width:100px;
      height:50px;
      border:1px solid green;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <p id=&#39;box&#39;></p>
  <p class=&#39;btn&#39;>
    <input type="button" value=&#39;向左&#39; id=&#39;btnLeft&#39;>
    <input type="button" value=&#39;向右&#39; id=&#39;btnRight&#39;>
  </p>
  <script>
    var oBox = document.getElementById("box");
    var minLeft = 0;
    var maxLeft = utils.win(&#39;clientWidth&#39;)-oBox.offsetWidth;
    var step = 5;
    var timer = null;
    function move(target){
      //target:告诉我要运动的目标位置
      _move();
      function _move(){
        window.clearTimeout(timer);
        var curLeft = utils.css(oBox,"left");
        if(curLeft<target){//向右走
          if(curLeft+step>target){//边界
            utils.css(oBox,"left",target);
            return;
          }
          curLeft+=step;
          utils.css(oBox,"left",curLeft)
        }else if(curLeft>target){//向左走
          if(curLeft-step<target){//边界
            utils.css(oBox,"left",target);
            return;
          }
          curLeft-=step;
          utils.css(oBox,"left",curLeft)
        }else{//不需要运动
          return;
        }
        timer = window.setTimeout(_move,10);
      }
    }
    document.getElementById(&#39;btnLeft&#39;).onclick = function(){
      move(minLeft)
    }
    document.getElementById(&#39;btnRight&#39;).onclick = function(){
      move(maxLeft)
    }
  </script>
</body>
</html>

Copier après la connexion

Remarque : Afin de permettre à l'élément actuel d'exécuter une seule animation à la fois (lorsque l'animation suivante démarre, effacez d'abord le timer de l'animation précédente) : Assurez-vous que la variable actuelle qui reçoit la valeur de retour du minuteur pour toutes les animations de l'élément doit être partagée. Il existe deux manières : 1. Réception globale (par exemple, le code ci-dessus var timer = null) 2. Ajoutez des attributs personnalisés à. l'élément (comme le montre la figure ci-dessous)

Résumé : De ce qui précède, nous pouvons tirer quatre règles d'optimisation de l'animation :

1. Jugement des limites et la taille du pas

2. Éliminez les inutiles Minuterie

3. Lorsque la fonction externe doit transmettre des paramètres, vous pouvez imbriquer une couche de fonctions à l'intérieur pour éviter l'accumulation de portées.

4. Stockez la valeur de retour du minuteur dans l'attribut personnalisé de l'élément pour éviter les conflits de variables globales et les exécutions multiples d'animations en même temps

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!