geek space web solutions

Créer son propre type de transition Tween en AS3

Vendredi, 18 Novembre 2011 12:50
transition tween
Si vous faites de l'AS3, vous connaissez très probablement les Tweens (Greensock, Caurina), ils vout permettent d'animer des éléments en "pure AS3" (sans Timeline). Dans cet article j'explique comment construire/utiliser une transition personnalisée.

De base, avec les Tweens, il vous est proposé plusieurs types de transition (imaginer une transition d'un point à un autre...), le type "linear" est une interpolation linéaire classique. En revanche, vous pouvez trouver des types de transition comme easeOut, easeIn, easeInQuad, easeInOutQuart, easeInOutBack, easeInCirc... (Je vous invite à vous rendre sur les sites de GreenSock et Caurina...)

transition tween elastic as3

Je me suis intéressé en particulier au type "easeOutElastic", je voulais simplement atténuer l'amplitude de cette transition... Pour cela, j'ai recréé une tranisition personnelle en reprenant le code d'origine de la transition "easeOutElastic".

import caurina.transitions.Tweener;

var myTransition = function(t:Number, b:Number, c:Number, d:Number, p_params:Object = null):Number {
if (t==0) return b;
if ((t/=d)==1) return b+c;
var p:Number = !Boolean(p_params) || isNaN(p_params.period) ? d*.3 : p_params.period;
var s:Number;
var a:Number = !Boolean(p_params) || isNaN(p_params.amplitude) ? 0 : p_params.amplitude;
if (!Boolean(a) || a < Math.abs(c)) {
a = c;
s = p/4;
} else {
s = p/(2*Math.PI) * Math.asin (c/a);
}
return ((a/3)*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);

};


Tweener.addTween($boule1, {y:posY_depart_boule1*s, time:3, delay:0.2, transition:myTransition} );
Dans l'exemple ci-dessus, j'ai simplement divisé par 3 la variable "a" ((a/3) à la ligne où se trouve le return) ("a" correspond à l'amplitude) pour obtenir un effet d'élastique avec moins d'amplitude...

Il est probablement possible d'obtenir le même résultat en étendant l'effet de transition déjà existant de la manière suivante :
import caurina.transitions.Tweener;
import caurina.transitions.Equations;

var myTransition = function(t:Number, b:Number, c:Number, d:Number):Number { var s:Number = 10; // overshoot return Equations.easeOutBack(t, b, c, d, s); };

Tweener.addTween(this.bola2, {_y:200, time:1, transition:myTransition});
 

Ajouter un Commentaire


Code de sécurité
Rafraîchir

Sections

Éditeur de fichier XML en ligne


"XML Manager" est un éditeur sécurisé permettant d'administrer en ligne un fichier XML.
Il fournit des fonctions avancées de recadrage et de redimensionnement des images...

Sondages

Pensez-vous que le HTML5 puisse complètement remplacer Flash ?
 
Seriez-vous intéressé par un éditeur d'XML en ligne ?
 

Paypal

paypal

Code du plugin Joomla AutoSEO 1.2 par www.geek-space.fr