ANIMATION VIA LES ÉQUATIONS DE ROBERT PENNER

Commentaire de nickadele le 26/06/2008 20:56:09 administrateur CS

Très bonne source au niveau du résultat et de l'effet !
Vu que l'objet de cette source c'est de montrer les effets de ROBERT PENNER, un + aurait été des commentaires sur la méthode utilisée.

Nickadele

Commentaire de ralecul le 27/06/2008 00:38:31

Désolé, je n'ai pas résisté à "prototyper" ta source :

function animate() {
   new Animation("animation", {
      duration   : $('duration').value,
      transition : $('transition').value,
      amplitude  : $('nbPix').value,
      mode       : $('cssRule').value,
      initSize   : 32
   });
};

function Animation(div, options) {
   var _options    = options             || {};
   var _fps        = _options.fps        || 80;
   var _duration   = _options.duration   || 800;
   var _transition = _options.transition || "linear";
   var _amplitude  = _options.amplitude  || 180;
   var _mode       = _options.mode       || "both";
   var _initSize   = _options.initSize   || 42; //because 42 is the answer ;-)
   var _div        = $(div);

   var _interval   = 1000/_fps;
   var _nbSteps    = Math.round(_duration/_interval);

   var _mapping = [];
   for(var i=1; i<=_nbSteps; ++i)
      _mapping.push(transitions[_transition](i*_interval, _initSize, _amplitude - _initSize, _duration));

   var currentStep = 0;
   var timer = setInterval(iter, _interval);

   function iter() {
      if (_mapping[currentStep]) {
         if (_mode == 'both') {
            _div.style.height = _mapping[currentStep]+'px';
            _div.style.width  = _mapping[currentStep]+'px';
         }
         else {
            _div.style[_mode] = _mapping[currentStep]+'px';
         }
         currentStep++;
      }
      else {
         clearInterval(timer);
         return;
      }
   }
}

PS : c'est fait à la va-vite, ya peut-être quelques erreurs...
PPS : Il suffit de remplacer la fonction animate par celle-ci et d'ajouter la classe Animation.

Commentaire de lakichemole le 27/06/2008 13:54:08

Il manque l'include de prototype dans ton exemple :/

Commentaire de ralecul le 27/06/2008 17:34:53

Utilisation de window.setInterval au lieu de interval
>> Alors ça, aucune idée, c'est une mauvaise (ou bonne ???) habitude.
A mon avis c'est facultatif et surtout je trouve que ça n'apporte pas grand chose au niveau de la lisibilité.
En revanche si tu souhaites remplacer la fonction alert par une méthode perso, ça me parait intéressant.
(En gros pour l'appel je ne m'en sers pas, mais pour la redéfinition je m'en sers)

>> tu n'as pas écris de classe mais deux objets.
Pourquoi deux objets ? -> ya une fonction (animate, qui créé un objet) et une définition de classe (Animation).
Animation est bien une classe vu que je l'utilise comme un constructeur.
Le problème de gestion des timers dont tu parles est également présent dans la source que tu présentes ici.
Je n'ai fait que la convertir à la mode Prototype, cependant j'ai ensuite tenté de reproduite ta démo avec cette source.
Le résultat : http://astre.henri.free.fr/creations_sandbox_mootools.php utilise les fichiers :
http://astre.henri.free.fr/js/effect.js
http://astre.henri.free.fr/js/myPrototype.js

Je serais curieux de voir comment tu as fait dans ta démo pour pouvoir comparer avec ma version.
En effet, j'ai été obligé de rajouter un Singleton Fx.Listener qui contient une liste de tous les effets appliqués à un élément.
Ya peut-être une méthode plus élégante ? Je n'ai pas pu comparer avec ta source car minified.js est assez illisible ;-)

Commentaire de Kimjoa le 28/06/2008 12:06:12

salut , je connais bien ses formules , pour les avoir utilisé dans mon propre script d'animation que je sortirais avec ma bibliothèques, qui me prend plus de temps que prévu. J'ai créer une formule d'élasticité en 'tatonant' pour permettre d'y inclure des options de résistance, nombre de va et viens,  et de tension , je suis pas bon en math, et cette formule est sans doute fausse mais l'effet est pas mal , voici la fonction


elasticDown : function(t,s,e,obj){
       return (e-s)*(((1-Math.cos(Math.pow(t,(1/obj.tension)) * Math.PI * obj.bounce)) * (1 - Math.pow(t,1/(t*obj.resistance)))) + Math.pow(t,1/(t*obj.resistance)))+s;
}
concernant les variables
t est le temp (compris entre 0 et 1)
s est la valeur de départ
e est la valeur d'arrivé
obj est l'objet avec les options

si un matheu pouvais me dire se kil en pense .

Pour les curieux http://www.dblog.free.fr/?act=article&art=64

bye