Articles taggués ‘M4Tween’

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: , , , ,
Posté dans Javascript | 21 Commentaires »

M4Tween premier jet

13th juillet, 2009 par Floz

J’ai un peu mis en pause mon application en flex de peinture avec les rubans. J’y reviendrai surement plus tard : j’ai quelques projets en flash avant.
Quand on était à HETIC, on discutait avec Arno de mettre les mains soit dans un moteur de physique/détection de collisions, soit dans un moteur de tween. Le moteur de tween étant plus simple à appréhender seul, du moins je pense, je me suis mis la tête dedans depuis une semaine.

Je suis pas mal le blog de Joa Ebert, notamment pour tout ce qui concerne l’optimisation des performances. J’en parlais dans mon post sur les LinkedList d’ailleurs. Il écrivait qu’il y avait fortement moyen d’obtenir de meilleurs perfs en utilisant une structure d’objet pooling, et des linkedList, au lieu de passer par des Array.
C’est donc ce que j’ai voulu faire, puisqu’il a dit que c’était bien, et qu’en plus il l’avait testé pour obtenir un résultat… impressionnant ? (son moteur de tween chez Hobnox contre tweenlite).
Bon, une chose est sure : la magie a moins (beaucoup moins ?) bien fonctionné de mon côté… :)

En tout cas, j’ai pas mal appris en terme de réflexion, ainsi que sur l’utilisation des Object, des Linked List, et des Pools. Je pense d’ailleurs faire mon prochain post sur ce sujet, ça pourrait être intéressant (et plus clair que celui que j’avais fais pour l’effet de désintégration !).

Voilà ce que ça donne (attention, 1000 objets qui bougent. Cliquez sur le swf pour lancer, et recliquez pour arrêter ;))
Avec Tweenlite :

This movie requires Flash Player 9

Avec Tweener :

This movie requires Flash Player 9

Avec M4Tween :

This movie requires Flash Player 9

Du côté des résultats, j’ai ici 32/33 pour TweenLite et 36/37 pour M4Tween. Donc c’est assez similaire, et beaucoup moins ouf de ce que Joa Ebert à fait (gneuh). Les FPS oscille beaucoup aussi je trouve sur M4Tween…
Bon, le but n’est pas de remplacer TweenLite (M4Tween peut juste bouger le bordel, il n’y a pas de plugins pour faire des transitions de couleurs etc.), mais d’avoir un moteur de tween interne au framework minuit4, pour nos propres outils.

Donc là, je me sors un peu la tête de ce code. Je verrais dans quelques jours si je vois pas des choses à changer/une partie de la structure à revoir.
Arno pense le porter en JS, donc il y verra surement des choses à revoir. :)

En ce qui concerne son utilisation :
Pour créer une Tween : M4Tween.create( l’objet sur lequel appliquer la tween, la durée de la tween en secondes, { x: la valeur, y: la valeur, …, easing: Quad.EaseIn, delay: la durée en seconde, onComplete : nomdefonction, onCompleteParams: [ param1, param2, ... ] });
Pour supprimer une Tween : M4Tween.release( laTween );
Pour supprimer une Tween (alternative) : laTween.dispose();
Pour supprimer une Tween d’un objet : M4Tween.releaseTweenOf( l’objet sur lequel a été appliqué la tween );

Les commentaires sont légers pour le moment, j’y reviendrai prochainement.

Pour terminer, l’outil de mesure de performance de minuit4 se voit doté d’une nouvelle fonctionnalité : calculer la moyenne des FPS sur la durée !

Télécharger les sources de M4Tween ici.
Télécharger les sources de l’outil de mesure de performances ici.
Le lien vers le SVN de minuit4 ici.

Tags: , , , , , ,
Posté dans Flash | 20 Commentaires »