Implémentation d'animations en JavaScript

[Argorate]

Bonjour,

je suis en train de faire différentes animations pour mon moteur de combat et je me rend compte que je n'ai pas vraiment structurer la chose, j'aimerais des avis sur comment faire au mieux des animations en javascript.

Ce que j'appel animation, ça peut par exemple être le fait de changer le bg-position sur un srpite pour créer une illusion de mouvement, mais ça peut aussi être des choses plus complexe.

Je prendrais mon exemple d'animation d'arme qui pour l'instant est coder le plus en dur possible (et c'est bien ça qui m’embête):

weapon.css({transform: 'rotate(90deg)', left: '-=16'});

setTimeout(function(){ weapon.css({transform: 'rotate(0deg)', left: '-=22'}); }, 50);

setTimeout(function(){ weapon.css({transform: 'rotate(-90deg)', left: '-=14'); }, 100);

setTimeout(function(){ weapon.hide();}, 150);

Donc, une animation est décomposé en ce que j'appellerais "step".

Quel est la meilleure implémentation selon vous?

voilà les idées que j'ai:

_une suite de setTimeOut() (comme ci-dessus)
_un setTimeOut() dans une fonction récursive + une variable step qui s'incrémente
_un setInterval() combiner à un tableau qui contient dans chaque case, une fonction qui correspond à une step de l'animation, donc on a aussi une variable step quelque part pour faire avancer le curseur de ce tableau. + une variable qui contient l'interval pour pouvoir le clearInterval() quand on veux.

Avez-vous mieux a proposer? Quel approche avez-vous ou feriez-vous?


merci.

[Ter Rowan]

jamais essayé, mais en modifiant la classe css de ton objet et en réalisant des animations css via la classe choisie ?

[Sephi-Chan]

Juste changer une classe me paraît une solution plus élégante. Cependant ça implique de toujours avoir le même genre d'animation. Genre des classes nommées ainsi :

• rotate-90-in-50-ms
  
• rotate-90-in-100-ms
  
• go-20-px-left-in-50-ms
  
• …
  

L'avantage c'est qu'il suffit de les combiner.

[Argorate]

oui mais ça peut faire un gros css pour rien parce que le nombre de combinaison justement, peut vite monter, alors que si c'est dynamique en js, j'ai pas de problème...

[niahoo]

Pour la temporisation j'utilise un ticker global pour le jeu

(function (GC) {

    'use strict';

    var API = {};

    // Ticker speed in ms

    var persec = 4;

    var speed = 1000 / persec;

    // Les triggers sont appelés dans cet ordre là

    var triggers = ['ontick','cooldown'];

    var count = 0;

    var ticker = handler_pool();

    var tid;

    ticker.addHandler('ontick',function(){

        console.log('----------------------------------------------------------------- LOOP');

    });

    var tick = function() {

        count += 1;

        each(function(ev){ ticker.trigger(ev,count);}, triggers);

        setTimeout(tick,speed);

    };

    API.registerCooldown = function(spell) {

        var trigger_id;

        var unreg = function(){

            if(spell.decreaseCD()) {

                ticker.removeHandler(trigger_id);

            }

        };

        trigger_id = ticker.addHandler('cooldown', unreg);

        return trigger_id;

    }

    API.onTick = function(fn) {

        return ticker.addHandler('ontick',fn);

    };

    API.removeHandler = function(id) {

        return ticker.removeHandler(id);

    };

    API.getSecs = function(remcount) {

        return remcount / persec;

    };

    API.start = function() {

        tid = setTimeout(tick,speed);

    }

    GC.ticker = API;

}(GC));

la handler_pool() c'est basiquement un objet qui stocke des fonctions et qui les appelle quand on le trigger().

---

ah et je vois que dans la fn tick j'oublie de reassigner tid au nouveau timeout pour pouvoir le clear (le clear, dans une fonction stop, n'est pas encore présent)