Explication détaillée des exemples d'utilisation de tween.js

Cet article présente principalement l'utilisation détaillée de tween.js. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Les mots précédents

TweenJS fournit une interface dégradée simple mais puissante. Il prend en charge les propriétés d'objet numérique dégradé et les propriétés de style CSS, et permet de combiner des animations et des actions interpolées liées pour créer des séquences complexes. Cet article présentera l'utilisation de tween.js en détail

Présentation

tween.js permet de modifier les valeurs d'attribut des éléments de manière fluide chemin. Il vous suffit d'indiquer à Tween quelle valeur vous souhaitez modifier, quelle sera sa valeur finale à la fin de l'animation, combien de temps dure l'animation et d'autres informations. Le moteur Tween peut calculer la valeur du point de début de l'animation à la fin de l'animation. pointez pour produire un effet d'animation fluide.

Par exemple, supposons qu'il y ait une position d'objet dont les coordonnées sont x et y :

var position = { x: 100, y: 0 }

Si vous souhaitez changer la valeur de x de 100 à 200, il vous suffit de faire ceci :

// Create a tween for position first
var tween = new TWEEN.Tween(position);
 
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

Ici, vous créez simplement l'objet tween, vous devez l'activer et laissez-le démarrer l'animation :

// And set it to start
tween.start();

Enfin, afin de lisser l'effet d'animation, la méthode TWEEN.update doit être appelée dans la même animation en boucle. Le code est le suivant :

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

Cette action mettra à jour tous les tweens activés, et position.x deviendra 200 en 1 seconde (par exemple, 1000 ms).

Vous pouvez également utiliser la fonction de rappel onUpdate pour imprimer les résultats sur la console

tween.onUpdate(function() {
  console.log(this.x);
});

Cette fonction est appelée à chaque fois que les préadolescents sont mis à jour. Sa fréquence dépend de nombreux facteurs. Par exemple : cela dépend de la vitesse d'exécution de votre ordinateur ou appareil

Démarrer l'animation

Tween.js lui-même ne fonctionnera pas et doit être explicitement indiqué via la méthode de mise à jour Quand commencera-t-il à fonctionner ? Il est recommandé d'utiliser cette méthode dans la boucle principale de l'animation. De bonnes performances d'image peuvent être obtenues en appelant la méthode requestAnimationFrame

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

Ici, la méthode d'appel sans paramètre est utilisée, et la méthode de mise à jour clarifiera l'heure actuelle afin de obtenir l'heure d'exécution de la dernière animation.

Vous pouvez également spécifier une heure pour la méthode de mise à jour :

TWEEN.update(100);

L'instruction ci-dessus signifie : temps de mise à jour = 100 millisecondes. Vous pouvez utiliser cette approche pour identifier toutes les fonctions variables dans le temps dans votre code. Par exemple, si l'animation a démarré et que vous souhaitez que toutes les animations se déroulent simultanément, modifiez le code d'animation comme suit :

var currentTime = player.currentTime;
TWEEN.update(currentTime);

Contrôler l'animation

【démarrer et arrêter】

Tween.start et Tween.stop sont utilisés pour contrôler respectivement le début et la fin de l'animation interpolée

Pour les animations qui ont terminé et n'a pas démarré, la méthode Tween.stop ne fonctionne pas. La méthode Tween.start reçoit également un paramètre time. Si ce paramètre est utilisé, l'animation d'interpolation démarrera l'animation après avoir retardé ce laps de temps. Sinon, l'animation démarrera immédiatement

[mise à jour]

Vous pouvez utiliser la méthode TWEEN.update pour effectuer des mises à jour d'animation

[chaîne]

Si vous créer plusieurs lignes, par exemple : une animation démarre après la fin d'une autre animation. Ceci peut être réalisé grâce à la méthode de la chaîne. Dans le code suivant, tweenB démarre l'animation après tweenA

tweenA.chain(tweenB);

Vous pouvez créer une animation en boucle infinie comme celle-ci :

tweenA.chain(tweenB);
tweenB.chain(tweenA);

【répéter】

Si vous créez une animation en boucle, vous pouvez utiliser la chaîne pour y parvenir, mais une meilleure façon est d'utiliser la méthode de répétition. Il reçoit un paramètre qui décrit combien de fois il souhaite boucler

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

[yoyo]

Cette fonction ne fonctionne que lors de l'utilisation de la méthode de répétition. Lorsqu'il est activé, l'effet du préadolescent s'apparente à un effet de boule yoyo. L'effet est que l'animation rebondira dans la direction opposée au début ou à la fin

[delay]

La méthode de retard est utilisée pour contrôler le délai entre les animations

tween.delay(1000);
tween.start();

Méthodes globales

Les méthodes suivantes sont définies dans l'objet global de TWEEN La plupart d'entre elles ne sont pas utilisées, à l'exception de la mise à jour. méthode :

[TWEEN.update(time)]

Cette méthode est utilisée pour tous les préadolescents activés. Si l'heure n'est pas spécifiée, l'heure actuelle sera utilisée.

[TWEEN.getAll et TWEEN.removeAll]

Ces deux méthodes sont utilisées pour obtenir une référence au tableau d'interpolations activé, ou pour supprimer tous les interpolations du tableau.

[TWEEN.add(tween) et TWEEN.remove(tween)]

permet d'ajouter une tween aux tweens activés, ou de supprimer une tween

Fonction d'assouplissement

tween.js fournit certaines fonctions d'assouplissement disponibles. Les fonctions disponibles sont : Linéaire, Quadratique, Cubique, Quartique, Quintique, Sinusoïdale, Exponentielle, Circulaire, Élastique, Retour et Rebond. Les types d'assouplissement sont divisés en : In, Out et InOut

Non seulement vous pouvez utiliser la fonction d'assouplissement fournie par tween.js, mais vous pouvez également personnaliser la fonction d'assouplissement. Mais les règles suivantes doivent être respectées

1. Il doit recevoir un paramètre

2. Il doit renvoyer une valeur basée sur le paramètre d'entrée

La fonction d'assouplissement est uniquement utilisée. à chaque fois sur chaque interpolation Appelé lors de la mise à jour, quel que soit le nombre de propriétés modifiées. Le résultat est ensuite utilisé pour la valeur initiale

easedElapsed = easing(k);
for each property:
  newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子：

function tenStepEasing(k) {
  return Math.floor(k * 10) / 10;
}

可以在tween 这样使用它

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是可以在每次tween循环周期的指定时间点调用自定义的函数。

例如：假设想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能通过setter方法，可以通过update方法的回调函数来设置新的setter值

var trickyObjTween = new TWEEN.Tween({
  propertyA: trickyObj.getPropertyA(),
  propertyB: trickyObj.getPropertyB()
})
  .to({ propertyA: 100, propertyB: 200 })
  .onUpdate(function() {
    this.setA( this.propertyA );
    this.setB( this.propertyB );
  });

或者如果想确认tween动画开始后某个对象指定状态下的某个值，可以通过start回调来获取它：

var tween = new TWEEN.Tween(obj)
  .to({ x: 100 })
  .onStart(function() {
    this.x = 0;
  });

【onStart】

tween开始动画前的回调函数。

【onStop】

tween结束动画后的回调函数。

【onUpdate】

在tween每次被更新后执行。

【onComplete】

在tween动画全部结束后执行。

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!