M4Tween - Javascript

10th août, 2009 par Arno

Depuis que je me suis mis plus sérieusement au javascript, je me suis toujours dit que çà pourrait être interessant de coder un petit moteur de Tween pour gérer de l’animation de base ou encore faire des benchmarks.
Alors oui ça existe déjà, certains sont même très performants (Scriptaculous…), ou encore directement intégré dans une librairie (Jquery…) mais le but ici n’est pas de remplacer ces librairies, dans un premier temps il s’agit de me faire une petite expérience javascript ainsi que de me permettre de manipuler un pattern dont Flo m’a parler : les linkedList (pour, ensuite, conquérir le monde).

Pour ce qui est de l’organisation générale, j’ai repris le principe que Flo avait déjà mis en place pour les M4Tween, excepté pour ce qui est de d’objet pooling que j’implenterais sans doute plus tard.
La classe M4Tween javascript requiert la librairie Prototype pour son excecution. On utilise notamment l’objet PeriodicalExcecuter pour émuler l’évènnement EnterFrame, ainsi que l’objet Template afin de pouvoir gérer facilement les propriétés css particulières (telles que la rotation par exemple).

Plutôt que de m’arracher les cheveux avec un navigateur qui ne respecte pas grand chose, j’ai fais l’impasse sur IE. Les tests effectués se sont trouvés concluant pour firefox 3.5, firefox 3.6 alpha1, Chrome 2.0, Chrome 3.0 ainsi qu’Opéra 10 beta 2.

Exemple d’utilisation simple de la classe :

<div id="myDiv"></div>
<script type="text/javascript" src="path/to/prototype.js"></script>
<script type="text/javascript" src="path/to/M4Tween.js"></script>
<script type="text/javascript">
//instanciation de la classe
M4Tween.create("myDiv", .7, {"marginLeft":"150px","opacity":.5});
</script>

Pour ce qui est des propriétés que l’on peut modifier, il n’y a que quelques propriétés supportées pour le moment : marginLeft, marginTop, opacity, top, left, width, height…

Les paramètres attendus par la méthode d’instanciation sont :

M4Tween.create(id, duree, params, onCompleteCallBack);
-id de l’élément du DOM à manipuler
-durée de l’animation
-paramètres ( {ease:Linera.easeNone, “marginLeft”:”140px”} )
-fonction à appeler à la fin de l’animation

Les fonctions de easing sont les mêmes que pour la version AS3, il s’agit des équations de Robet Penner.

Enfin voici quelques démo du moteur en action sur 50 div, 100 div, 150 div, 200 div et 250 div.

M4Tween.js

Tags: Javascript, LinkedList, M4Tween, Prototype, tween
Posté dans Javascript