Maison > Article > interface Web > Introduction détaillée à l'animation Tween.js

Introduction détaillée à l'animation Tween.js

零下一度original: 2017-06-26 13:34:382313parcourir

1. L'utilisation de postuler et d'appeler.

Parlons d’abord de quelque chose sans rapport avec cet article de blog, à savoir l’utilisation de l’application et de l’appel. En fait, l'utilisation de apply et call est la même, mais leurs paramètres sont différents. apply est un tableau, tandis que l'appel est passé individuellement, semblable à une énumération.

1. Convertissez les arguments en tableaux standard et vous pouvez utiliser push et d'autres méthodes.

function test(){//arguments.push(5); //arguments.push is not a function    console.log(arguments)var arg = Array.prototype.slice.apply(arguments,[]);   // var arg = Array.prototype.slice.call(arguments,'');console.log(arg); //[1,2,3,4]arg.push(5); // [1,2,3,4,5]}

test(1,2,3,4);

2. Comment pousser les paramètres en arguments directement dans un tableau ? (Également avec l'aide de apply)

function test(){var arg = [];
    Array.prototype.push.apply(arg,arguments);
    console.log(arg); // [1,2,3,4] 是不是发现要把一个数组//插入到另外一个数组的后面不用for循环了，也不用contact了呢？//其实apply 和call还是有多用法，比如继承。其实主要是把//前面对象的方法赋给后面对象而已。比如 object.apply(object1,arg)//把object的方法赋给 object1。而 arg是参数。}

test(1,2,3,4);

L'épisode se termine ici. Ce qui suit explique principalement tween.js

2. À propos de Tween.js

1. Tween.js est une ressource JS qui contient divers algorithmes d'animation classiques. En fait, plus similaire à jQuery.easing.js. Les noms des méthodes principales sont également les mêmes. Le code sans compression ne fait que 800 lignes.

comprend principalement :

Linéaire : effet de mouvement uniforme linéaire
Quadratique : assouplissement quadratique (t^2) ;
Cubique : mouvement d'assouplissement cubique (t^3) ;
Quartic : assouplissement à la quatrième puissance (t^4)
Quintic ; : assouplissement à la puissance cinquième (t^5) ;
Sinusoïdal : assouplissement à la courbe sinusoïdale (sin(t )) ;
Exponentielle
: assouplissement de la courbe exponentielle (2^t) ; : assouplissement de la courbe circulaire (sqrt(1-t^2)) ;
: Assouplissement de la courbe sinusoïdale avec décroissance exponentielle ;
: Assouplissement cubique hors plage ((s +1)*t^3 – s*t^2);
: Rebond assoupli avec décroissance exponentielle.
Chaque effet est divisé en trois méthodes d'assouplissement, qui sont :
easeIn
: démarre à partir de 0 pour accélérer l'assouplissement , c'est-à-dire ralentir d'abord puis rapidement

: ralentir jusqu'à 0, c'est-à-dire ralentir d'abord puis ralentir
;
: L'assouplissement commence à 0 dans la première moitié et décélère jusqu'à 0 dans la seconde moitié.
Beaucoup d'amis, je ne me souviens plus lequel est le plus rapide ou le plus lent,
Je vais vous apprendre ici à nouveau ma méthode de notation maléfique unique. . Pour notre premier OOXX, quand nous sommes entrés (
), nous avons été lents au début, puis plus vite en entrant (), nous avons commencé très vite, et quand nous l'avons été ; sur le point de sortir, nous étions réticents à lâcher prise, puis la vitesse est devenue plus lente. Cela correspond complètement à l’effet d’animation que nous avons ici.
Tous ces algorithmes d'assouplissement sont indissociables des quatre paramètres suivants,

, easeIn, avec les significations suivantes easeOuteaseIneaseOut

2.console.log(TWEEN);tbcd

/*
 * t: current time（当前时间）；
 * b: beginning value（初始值）；
 * c: change in value（变化量）；
 * d: duration（持续时间）。 */

On voit qu'il existe de nombreuses méthodes montées sur TWEEN, et objet. Tant que nous creusons un par un, nous connaîtrons l'utilisation spécifique.

3. Commençons par une petite séquence.

console.log(TWEEN)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#target{width: 100px;height: 100px;background: red;}</style></head><body><div id="target"></div></body><script src="tween.js?1.1.11"></script><script src="index.js?1.1.11"></script></html>

var position;var target;var tween, tweenBack;

init();
animate();function init() {

    position = {x: 100, y: 100, rotation: 0};
    target = document.getElementById('target');
    tween = new TWEEN.Tween(position)
      .to({x: 700, y: 200, rotation: 359}, 2000)
      .delay(1000)
      .easing(TWEEN.Easing.Elastic.InOut)
      .onUpdate(update);

    tweenBack = new TWEEN.Tween(position)
      .to({x: 100, y: 100, rotation: 0}, 3000)
      .easing(TWEEN.Easing.Elastic.InOut)
      .onUpdate(update);

    tween.chain(tweenBack);
    tweenBack.chain(tween);

    tween.start();

}function animate( time ) {

    requestAnimationFrame( animate );

    TWEEN.update( time );

}function update() {

    target.style.webkitTransform = 'translate('+position.x+ 'px'+','+ position.y + 'px' +')' + 'rotate(' + Math.floor(position.rotation) + 'deg)';//target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
   // target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';}

Suivez le code source correspondant de chaque API. Sachez simplement comment l'utiliser. La comparaison du code source représente un peu plus de 800 lignes.

4. Fonction de mouvement

Il y a beaucoup de petites routes, de détours, de grandes routes et de routes de boue cahoteuses dans la vie d'une personne. Quoi qu'il en soit, ma ville natale est pleine de routes de boue cahoteuses. Cela fait presque 6 ans que je suis entré en contact avec le premier site internet. Le temps passe si vite et la trajectoire de la vie change rapidement. Si vous voulez trouver une route lumineuse hors de la route de boue cahoteuse, vous devez avancer sans aucune intention de reculer. Jusqu’où vous pouvez aller dans un domaine dépend de la durée pendant laquelle vous pouvez persister. Certains disent que lorsqu’on a persévéré 10 000 heures dans un domaine, on est un maître dans ce domaine. 10000/24 ? Cela semble faire plus de 400 jours. Hors temps de sommeil, temps de travail et temps de jeu. On estime qu’il faudra 4 à 6 ans pour atteindre 10 000 heures. Je vous souhaite également à tous une bonne journée et que tout se passe bien.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse comparative des mécanismes de distribution d'événements sous Android et JavaScriptArticle suivant：Analyse comparative des mécanismes de distribution d'événements sous Android et JavaScript

Articles Liés

Voir plus