Qu’est-ce qu’une fonction d’accélération?

Une fonction d’accélération est généralement une fonction qui décrit la valeur d’une propriété en fonction d’un pourcentage d’exhaustivité. Différents frameworks utilisent des variantes légèrement différentes, mais le concept est facile à saisir une fois que vous avez l’idée, mais il est probablement préférable de regarder quelques exemples.

Tout d’abord, regardons l’interface que toutes nos fonctions d’assouplissement respecteront.

Nos fonctions d’accélération prendront plusieurs arguments:

• percentComplete: ( 0.0 à 1.0 ).
• elaspedTime: nombre de millisecondes d’exécution de l’animation
• startValue: la valeur à démarrer à (ou la valeur lorsque le pourcentage terminé est de 0%)
• endValue: la valeur à laquelle se terminer (ou la valeur lorsque le pourcentage de complétion est de 100%)
• totalDuration: La longueur totale souhaitée de l’animation en millisecondes

Et renverra un nombre qui représente la valeur à laquelle la propriété doit être définie.

Note: c’est la même signature que jQuery utilise pour ses fonctions d’accélération, que je vais emprunter pour des exemples.

Le plus facile à comprendre est une facilité linéaire:

 var linear = function(percent,elapsed,start,end,total) { return start+(end-start)*percent; } 

Et maintenant, pour mettre cela à profit:

Disons que nous avions une animation qui allait durer 1000 millisecondes et était censée commencer à 0 et se terminer à 50. Passer ces valeurs dans notre fonction d’accélération devrait nous indiquer quelle devrait être la valeur réelle:

 linear(0, 0, 0,50, 1000) // 0 linear(0.25, 250, 0, 50, 1000) // 12.5 linear(0.5, 500, 0, 50, 1000) // 25 linear(0.75, 750, 0, 50, 1000) // 37.5 linear(1.0, 1000, 0, 50, 1000) // 50 

Ceci est un tween assez simple (sans jeu de mots). C’est une simple interpolation linéaire. Si vous deviez représenter graphiquement la valeur en fonction du temps, ce serait une ligne droite:

Jetons un coup d’œil à une fonction d’accélération un peu plus compliquée, une facilité de quadruple dans:

 var easeInQuad = function (x, t, b, c, d) { return c*(t/=d)*t + b; } 

Et regardons les mêmes résultats, en utilisant les mêmes entrées que précédemment:

 easeInQuad(0, 0, 0, 50, 1000) // 0 easeInQuad(0.25, 250, 0, 50, 1000) // 3.125 easeInQuad(0.5, 500, 0, 50, 1000) // 12.5 easeInQuad(0.75, 750, 0, 50, 1000) // 28.125 easeInQuad(1, 1000, 0, 50, 1000) // 50 

Notez les valeurs très différentes de notre facilité linéaire. Il commence très lentement, puis accélère jusqu’à son point final. Une fois l’animation terminée à 50%, elle n’a atteint que 12,5, soit le quart de la distance réelle entre les valeurs de start et de end nous avons spécifiées.

Si nous devions représenter graphiquement cette fonction, cela ressemblerait à ceci:

Jetons maintenant un coup d’œil à une facilité de base:

 var easeOutQuad = function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }; 

Cela fait essentiellement la courbe d’accélération “opposée” d’une facilité. Elle commence rapidement et décélère ensuite jusqu’à sa valeur finale:

Et puis il y a des fonctions qui facilitent à la fois dans et hors:

 var easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }; 

Cette fonction commence lentement et finit lentement, atteignant sa vitesse maximale au milieu.

Vous pouvez utiliser un grand nombre d'accélérations / d'interpolations: Linéaire, Quadradique, Cubique, Quart, Quint, Sine. Et il existe des fonctions d’assouplissement spécialisées comme Bounce et Élastic, qui ont leurs propres fonctions.

Par exemple, une facilité élastique dans:

 var easeInElastic = function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*ds)*(2*Math.PI)/p )) + b; }, 

Peut-être que quelqu'un d'autre peut expliquer la partie mathématique de l'interpolation, parce que honnêtement, je ne suis pas un maths. Mais c'est le principe de base des fonctions d'accélération elles-mêmes.

Lorsque vous lancez une interpolation / animation, le moteur d'animation mémorise les valeurs de début et de fin souhaitées. Ensuite, chaque fois qu’il est mis à jour, ses chiffres montrent combien de temps a passé. Il appelle la fonction d'accélération fournie avec les valeurs pour déterminer la valeur à laquelle la propriété doit être définie. Tant que toutes les fonctions d'accélération implémentent la même signature, elles peuvent être facilement remplacées et le moteur d'animation central n'a pas à connaître la différence. (Ce qui permet une excellente séparation des préoccupations).

Vous remarquerez que j'ai évité de parler explicitement des positions x et y , car l'assouplissement n'a rien à voir avec la position en soi . Une fonction d'accélération définit simplement une transition entre les valeurs de début et de fin. Celles-ci peuvent être des coordonnées x , une couleur ou la transparence d'un object.

En fait, en théorie, vous pouvez appliquer différentes fonctions d'accélération pour interpoler des propriétés différentes. J'espère que cela aidera à éclairer l'idée de base.

Et voici un exemple vraiment sympa (qui utilise une signature légèrement différente, mais qui est le même principe) à jouer pour avoir une idée de la manière dont l'assouplissement est lié à la position.

modifier

Voici un petit jsFiddle que j'ai réuni pour montrer quelques-unes des utilisations de base en javascript. Notez que la propriété top est interpolée à l'aide de bounce et que la propriété left est interpolée à l'aide d'un quad. Utilisez le curseur pour simuler la boucle de rendu.

Toutes les fonctions de l'object d' easing ayant la même signature, vous pouvez les échanger l'une contre l'autre. À l'heure actuelle, la plupart de ces éléments sont tous codés en dur (des choses comme les valeurs de début et de fin, les fonctions d'interpolation utilisées et la longueur de l'animation), mais dans un exemple réel d'aide à l'animation, vous devez passer dans les propriétés suivantes:

• La propriété à changer
• La valeur de départ (ou si elle n'est pas undefined utilisez sa valeur actuelle)
• La valeur finale
• La longueur de l'animation devrait être
• La référence à la fonction d'interpolation que vous souhaitez utiliser.

Le moteur d'animation suivrait ces parameters pendant toute la durée de l'animation et, à chaque cycle de mise à jour, il utiliserait l'argument d'interpolation pour calculer la nouvelle valeur des propriétés.

Une fonction d’accélération est un algorithme qui contrôle la vitesse d’une animation pour donner un effet souhaité (rebondissement, zoom avant et lent, etc.).

Découvrez ce que MSDN a à dire à leur sujet pour un peu plus de détails.

Je voudrais poster ma réponse à cette vieille question même si elle a une réponse acceptée. 32bitkid a fait les explications nécessaires. Ce que j’appendai, c’est l’implémentation pratique de base, car je n’en ai pas trouvé (que j’ai également posté une question à ce sujet).

Prenez cette animation linéaire simple, par exemple. Je doute que cela nécessite des explications puisque le code est explicite. Nous calculons une valeur d’incrément constante qui ne change pas avec le temps et à chaque itération, nous augmentons la position de la boîte. Nous modifions directement la variable de position, puis nous l’appliquons sur la boîte.

JSFiddle

 var box = document.getElementById("box"); var fps = 60; var duration = 2; // seconds var iterations = fps * duration; // 120 frames var startPosition = 0; // left end of the screen var endPosition = window.innerWidth - box.clientWidth; // right end of the screen var distance = endPosition - startPosition; // total distance var posIncrement = distance / iterations; // change per frame var position = startPosition; // current position function move() { position += posIncrement; // increase position if (position >= endPosition) { // check if reached endPosition clearInterval(handler); // if so, stop interval box.style.left = endPosition + "px"; // jump to endPosition return; // exit function } box.style.left = position + "px"; // move to the new position } var handler = setInterval(move, 1000/fps); // run move() every 16~ millisecond 

 body { background: gainsboro; } #box { width: 100px; height: 100px; background: white; box-shadow: 1px 1px 1px rgba(0,0,0,.2); position: absolute; left: 0; } 

C’est une transition de propriété (taille, forme, emplacement) d’un état à un autre.

Voici quelques graphes soignés décrivant les fonctions d’accélération offertes par jquery ui.

http://jqueryui.com/demos/effect/easing.html

Penser dans la vraie vie ne fonctionne pas comme des ordinateurs. Je pense que vous ne pouvez pas allumer et éteindre immédiatement, comme si vous ne pouviez pas prétendre que votre petite amie vous aimerait immédiatement. Les scientifiques et les informaticiens (qui ne connaissent rien à votre petite amie) ont donc inventé des fonctions d’assouplissement. C’est juste comme appliquer ou changer des choses comme des animations pas d’une manière immédiate. Donc, si vous déplacez un rectangle de gauche à droite, cela ne bouge pas comme un robot: “commencez, déplacez-vous à une vitesse constante et arrêtez-vous immédiatement”, Ainsi, l’assouplissement est comme laisser certaines animations, fonctions, objects ou choses se comporter comme des choses dans la vraie vie. Chaque effet de facilité définit un comportement, c’est pourquoi nous avons des effets de facilité “élastiques”, “rebondissants”, etc.