Utiliser tween.js pour implémenter un algorithme d'animation d'interpolation simplifié

Cet article présente principalement l'exemple d'animation d'interpolation d'assouplissement tween.js. Maintenant, je le partage avec vous et le donne comme référence.

1. Comprendre tween.js

Si vous comprenez ce qui précède, vous pouvez ignorer la partie suivante. Explication .js Ce qui suit présente comment utiliser ce Tween. Tout d'abord, les trois paramètres b, c et d (c'est-à-dire la valeur initiale, le montant du changement, la durée) doivent être déterminés avant le début de l'assouplissement. Tout d'abord, introduisez un concept d'animation d'interpolation. Flash utilise la classe Tween lors de la création d'animations. Elle peut être utilisée pour créer de nombreux effets d'animation, tels que l'accélération, le ressort, etc. tween.js peut être interprété comme une animation d'interpolation dans Flash. La question est donc : qu'est-ce que l'animation d'interpolation ?

Je crois que ceux qui ont étudié Flash savent que l'animation d'interpolation est le moyen d'expression principal et très important dans Flash. 1. Il existe deux types d'animation d'interpolation : l'animation d'interpolation d'action et l'animation d'interpolation de forme, mais vous n'avez pas besoin d'en savoir beaucoup à ce sujet en js. D'accord, sans plus tarder, jetons un coup d'œil aux informations de l'Encyclopédie Baidu à ce sujet. animation d'interpolation. Définition : Animation d'interpolation : lors de l'animation flash, une "animation d'interpolation" doit être effectuée entre deux images clés pour réaliser le mouvement de l'image. Après l'insertion de l'animation d'interpolation, l'image d'interpolation entre les deux images clés est automatiquement générée ; par l'ordinateur.

Obtenu par calcul

Alors, que sont les images clés ? Par exemple : Faisons d'abord un peu de vulgarisation scientifique. Les films et les animations que nous regardons habituellement sont tous en 24 images, et en 24 images. sont une seconde. L'œil humain peut capturer Dans la plage. Vous pouvez imaginer qu'il y a 22 points entre les deux points, formant une ligne droite ou une courbe, et un cadre est la plus petite unité d'une seule image. en animation, et une seule image Elle peut être considérée comme un objet (tout est un objet, sauf les types de valeur). Et cette ligne représente la trajectoire de mouvement de l'objet.Deux et quatre paramètres

t : heure actuelle--> représente le premier point, qui est la première image, où commence une animation.
b : valeur de départ--> représente la valeur initiale, qui est le montant de départ. Lorsque nous regardons des films ou des animations, nous ne regardons généralement pas le prologue, alors sautez le. commencer et choisir la première partie. Vous souhaitez commencer à regarder la position entre une image et la dernière image, et cette position est la valeur initiale.
c : changement de valeur--> représente la dernière image moins la valeur initiale, qui est la quantité de changement,
d : durée -->Représente la dernière image, la fin des 1 et la fin de l'animation.

Utilisation de tween.js 1. Télécharger 2. Importer 3. Utiliser la syntaxe tween.js

Nom de la fonction d'assouplissement (t, b, c,d);

Remarque : Lorsque le nombre de pas de départ augmente pour être égal au nombre de pas de fin, le mouvement entier se termine. Remarque : Le mouvement ne se termine que lorsque t augmente pour être égal à d ; si non, attendez, le mouvement ne s'arrêtera pas.3. code de fichier entre

/*
 * Tween.js
 * t: current time（当前时间）；
 * b: beginning value（初始值）；
 * c: change in value（变化量）；
 * d: duration（持续时间）。
*/
var Tween = {
  Linear: function(t, b, c, d) { //匀速
    return c * t / d + b; 
  },
  Quad: { //二次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t + b;
    },
    easeOut: function(t, b, c, d) {
      return -c *(t /= d)*(t-2) + b;
    },
    easeInOut: function(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b;
      return -c / 2 * ((--t) * (t-2) - 1) + b;
    }
  },
  Cubic: { //三次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t * t + b;
    },
    easeOut: function(t, b, c, d) {
      return c * ((t = t/d - 1) * t * t + 1) + b;
    },
    easeInOut: function(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
      return c / 2*((t -= 2) * t * t + 2) + b;
    }
  },
  Quart: { //四次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t * t*t + b;
    },
    easeOut: function(t, b, c, d) {
      return -c * ((t = t/d - 1) * t * t*t - 1) + b;
    },
    easeInOut: function(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
      return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
    }
  },
  Quint: { //五次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t * t * t * t + b;
    },
    easeOut: function(t, b, c, d) {
      return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
    },
    easeInOut: function(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
      return c / 2*((t -= 2) * t * t * t * t + 2) + b;
    }
  },
  Sine: { //正弦缓动效果
    easeIn: function(t, b, c, d) {
      return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    },
    easeOut: function(t, b, c, d) {
      return c * Math.sin(t/d * (Math.PI/2)) + b;
    },
    easeInOut: function(t, b, c, d) {
      return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
    }
  },
  Expo: { //指数缓动效果
    easeIn: function(t, b, c, d) {
      return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    },
    easeOut: function(t, b, c, d) {
      return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    },
    easeInOut: function(t, b, c, d) {
      if (t==0) return b;
      if (t==d) return b+c;
      if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
    }
  },
  Circ: { //圆形缓动函数
    easeIn: function(t, b, c, d) {
      return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
    },
    easeOut: function(t, b, c, d) {
      return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
    },
    easeInOut: function(t, b, c, d) {
      if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
      return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
    }
  },
  Elastic: { //指数衰减正弦曲线缓动函数
    easeIn: function(t, b, c, d, a, p) { //加速
      var s;
      if (t==0) return b;
      if ((t /= d) == 1) return b + c;
      if (typeof p == "undefined") p = d * .3;
      if (!a || a < Math.abs(c)) {
        s = p / 4;
        a = c;
      } else {
        s = p / (2 * Math.PI) * Math.asin(c / a);
      }
      return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    },
    easeOut: function(t, b, c, d, a, p) { //减速
      var s;
      if (t==0) return b;
      if ((t /= d) == 1) return b + c;
      if (typeof p == "undefined") p = d * .3;
      if (!a || a < Math.abs(c)) {
        a = c; 
        s = p / 4;
      } else {
        s = p/(2*Math.PI) * Math.asin(c/a);
      }
      return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
    },
    easeInOut: function(t, b, c, d, a, p) { //先加速后减速
      var s;
      if (t==0) return b;
      if ((t /= d / 2) == 2) return b+c;
      if (typeof p == "undefined") p = d * (.3 * 1.5);
      if (!a || a < Math.abs(c)) {
        a = c; 
        s = p / 4;
      } else {
        s = p / (2 *Math.PI) * Math.asin(c / a);
      }
      if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
      return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
    }
  },
  Back: { //超过范围的三次方的缓动函数
    easeIn: function(t, b, c, d, s) {
      if (typeof s == "undefined") s = 1.70158;
      return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    easeOut: function(t, b, c, d, s) {
      if (typeof s == "undefined") s = 1.70158;
      return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    easeInOut: function(t, b, c, d, s) {
      if (typeof s == "undefined") s = 1.70158; 
      if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
      return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
    }
  },
  Bounce: { //指数衰减的反弹曲线缓动函数
    easeIn: function(t, b, c, d) {
      return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
    },
    easeOut: function(t, b, c, d) {
      if ((t /= d) < (1 / 2.75)) {
        return c * (7.5625 * t * t) + b;
      } else if (t < (2 / 2.75)) {
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
      } else if (t < (2.5 / 2.75)) {
        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
      } else {
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
      }
    },
    easeInOut: function(t, b, c, d) {
      if (t < d / 2) {
        return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
      } else {
        return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
      }
    }
  }
}
Math.tween = Tween;

4. Donnez un exemple Chestnut

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="Tween/tween.js"></script>
    <style>
      *{margin: 0;padding: 0;}
      .out{width: 800px;height: 500px;background: #e5e5e5;position: relative;padding: 20px;text-align: center;}
      .inner{width: 50px;height: 50px;border-radius: 50%;background: #FF0000; position: absolute;left: 50px;top: 50px;}
    </style>
  </head>

  <body>
    <p id="app" class="out">
      <p class="inner" id="ball"></p>
      <button id="start" @click="start()">start</button>
    </p>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: &#39;#app&#39;,
      data: {
        t: 0,
        b: 50,
        c: 500,
        d: 1500,
      },
      methods:{
        start(){
          var t = this.t;
          const b = this.b;
          const c = this.c;
          const d = this.d;
          const setInt = setInterval(()=>{
            t++;
            console.log(t)
            if(t==300){clearInterval(setInt)}
            console.log(t);
            const ballLeft = Tween.Linear(t,b,c,d)+"px";
            ball.style.left = ballLeft;
          },20)
        }
      }
    })
  </script>
</html>

5. Expérience personnelle

L'avantage du tween est que l'effet de L'interpolation est basée sur un algorithme, pas sur la grammaire d'une certaine langue. Elle peut être utilisée dans un large éventail d'endroits, et une fois que vous l'aurez apprise, vous en bénéficierez pour la vie.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Définir des variables globales ou des méthodes de données en fonction de la vue (tutoriel détaillé)

Utilisez jquery pour cliquer sur la touche Entrée pour obtenir l'effet de connexion (tutoriel détaillé)

Comment obtenir les informations textuelles de l'élément actuel à partir de vue.js

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!