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

Question

Qu'est-ce que l'on entend par fonction d'accélération dans le contexte de l'animation. Il semble que dojo, jquery, silverlight, flex et d'autres systèmes d'assurance-chômage ont la notion de fonction d'accélération. Je ne pouvais pas trouver une bonne explication de l'assouplissement des fonctions? Quelqu'un peut-il expliquer le concept de fonctions d'accélération, ou pointer une bonne explication d'entre eux, je suis intéressé par le concept pas dans les détails spécifiques de d'un cadre?

assouplit strictement utilisé pour l'emplacement ou est-il général et peut être appliquée à une propriété d'un objet?

Answer 1

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

Tout d'abord permet de regarder à l'interface que toutes nos fonctions d'accélération respecteront.

Nos fonctions d'assouplissement prendra plusieurs arguments:

• percentComplete:. (0.0 à 1.0)
• elaspedTime: Le nombre de millisecondes de l'animation a été en cours d'exécution
• startValue: la valeur pour commencer à (ou de la valeur lorsque le total est égal à 0 pour cent en%)
• endValue: la valeur de fin au (ou à la valeur lorsque la complète pour cent est de 100%)
• totalDuration: La longueur totale souhaitée de l'animation en millisecondes

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

Note:. C'est la même signature que jQuery utilise pour ses fonctions d'assouplissement, que je vais emprunterons 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 de mettre cette option pour utiliser:

Disons que nous avions une animation qui allait aller pour 1000 millisecondes et était censé commencer à 0 et se terminent à 50. Passant ces valeurs dans notre fonction d'accélération devrait nous dire quelle est la valeur réelle doit être:

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 assez simple (sans jeu de mots) tween. Il est une simple interpolation linéaire. Si vous étiez à la valeur graphique en fonction du temps, ce serait une ligne droite:

Permet de jeter un oeil à un peu plus compliqué fonction d'accélération, une facilité quadratique:

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

Et permet de regarder 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 que les valeurs sont très différentes de notre facilité linéaire. Il commence très lentement, puis accélère à son point de fin. A 50% d'achèvement de l'animation, il n'a fait à une valeur de 12,5, ce qui est un quart de la distance réelle entre les valeurs de start et end nous avons spécifié.

Si nous devions représenter graphiquement cette fonction, il ressemblerait à quelque chose comme ceci:

permet maintenant de jeter un oeil à une facilité de base sur:

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

fait essentiellement la courbe d'accélération « opposé » d'une aisance dans Il commence rapidement et décélère à sa valeur de fin.

Et puis il y a des fonctions que la facilité à 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 va commencer à ralentir et à la fin lente, pour atteindre sa vitesse maximale au milieu.

Il y a un tas d'assouplissement / interpolations que vous pouvez utiliser: Linear, polynome, cubique, QUART quint, Sine. Et il y a des fonctions d'accélération de spécialité comme Bounce et élastique, qui ont leur propre.

Par exemple, une facilité élastique:

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*d-s)*(2*Math.PI)/p )) + b;
},

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

Lorsque vous démarrez une interpolation / animation, le moteur d'animation se souvient des valeurs de début et de fin que vous voulez. Ensuite, chaque fois il met à jour, ses chiffres sur combien de temps a passé. Il appelle la fonction d'accélération fournie avec les valeurs à déterminer la valeur de la propriété doit être définie à. Tant que toutes les fonctions d'accélération mettre en œuvre la même signature, ils peuvent être échangés avec facilité, et le moteur d'animation de base ne doit pas connaître la différence. (Ce qui fait un excellent soiparatio des préoccupations).

Vous remarquerez que j'ai évité de parler de positions de x et y explicitement, parce que l'assouplissement n'a rien à voir avec spécifiquement la position en soi . Une fonction d'accélération définit simplement une transition entre un début et les valeurs d'extrémité. Ceux-ci pourraient être coordonnées x, ou une couleur, ou la transparence d'un objet.

En fait, en théorie, vous pouvez appliquer différentes fonctions d'assouplissement pour interpoler des propriétés différentes. Espérons que cela aide à faire la lumière sur l'idée de base.

Et voici vraiment exemple de frais (qui utilise une signature légèrement différente, mais le même principe) de jouer avec l'idée d'obtenir de la façon dont l'assouplissement a trait à la position.

---

Modifier

Voici un petit jsFiddle Je jeté ensemble pour montrer quelques-uns des usages de base en javascript. Notez que la propriété top est interpolé à l'aide de rebond, et la propriété left est interpolé à l'aide d'un quad. Utilisez le curseur pour simuler la boucle de rendu.

Étant donné que toutes les fonctions de l'objet easing ont la même signature, vous pouvez échanger l'un d'eux les uns des autres. En ce moment, la plupart de ces choses sont toutes codées en dur (des choses comme des valeurs de début et de fin, les fonctions d'interpolation qui sont utilisés et la durée de l'animation), mais dans un exemple réel d'une aide d'animation, vous voulez passer dans les propriétés suivantes:

• La propriété à modifier
• La valeur de départ (ou si undefined gauche puis utilisez sa valeur actuelle)
• La valeur finale
• La longueur de l'animation doit être
• La référence à la fonction tweening que vous souhaitez utiliser.

Le moteur d'animation garderait la trace de ces paramètres pour la durée de l'animation et au cours de chaque cycle de mise à jour, il utiliserait l'argument interpolations pour calculer les propriétés nouvelle valeur.

Answer 2

Une fonction d'accélération est un algorithme qui commande la vitesse d'une animation pour donner un effet désiré (rebondissement, zoom avant et lent, etc.).

Découvrez ce que MSDN dit au sujet de leur un peu plus en détail.

Answer 3

Je voudrais poster ma réponse à cette vieille question, même si elle a une réponse acceptée. 32bitkid a fait l'explication nécessaire. Ce que je vais ajouter est la mise en œuvre pratique de base, parce que je ne pouvais pas trouver un (que je également posté un question à ce sujet).

Prenez cette simple animation linéaire, par exemple. Je doute qu'il a besoin d'explications puisque le code est explicite. Nous calculons une valeur d'incrément constante qui ne change pas au fil du temps et à chaque itération, nous augmentons la position de la boîte. Nous modifions la variable de position directement, puis l'appliquer 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;
}

<div id="box"></div>

---

Maintenant, nous allons ajouter l'assouplissement. Nous commençons simplement à l'aide linear (pas d'assouplissement). Il va entraîner la même animation ci-dessus, mais l'approche est différente. Cette fois-ci, nous ne modifiera pas directement la variable de position. Ce que nous allons modifierons est temps.

function linear(time, begin, change, duration) {
    return change * (time / duration) + start;
}

Tout d'abord, nous allons parler des paramètres.

• time: le temps écoulé
• begin: (. Largeur, à gauche, la marge, l'opacité, etc.) la valeur initiale d'une propriété
• change: déplacement, (valeur finale - valeur de départ)
• duration: durée totale de l'animation prendra

time et duration sont directement liés. Si vous avez 2 secondes d'animation, vous augmentez time et le transmettre à la fonction d'accélération linear. La fonction retourne une position qui indique que la boîte doit être à cette position au moment donné.

Le mot Let que je me déplace une boîte de 0 à 100 en 2 secondes. Si je veux obtenir la position de la boîte, par exemple à 700 milliseconde, je dirais que la fonction linear de la manière suivante:

linear(0.7, 0, 100, 2);

qui renverrait 35. 700 millisecondes après l'animation démarre, la position de la boîte sera à 35px. Voyons voir en action.

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 timeIncrement = duration / iterations;
var position      = 0;
var time          = 0;

function move() {
	time += timeIncrement;
	position = linear(time, startPosition, distance, duration);
	if (position >= endPosition) {
		clearInterval(handler);
		box.style.left = endPosition + "px";
		return;
	}
	box.style.left = position + "px";
}

var handler = setInterval(move, 1000/fps);

function linear(time, begin, change, duration) {
	return change * (time / duration) + begin;
}

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

<div id="box"></div>

---

Le parth qui a besoin d'attention dans ce code est:

var timeIncrement = duration / iterations;
var time = 0;

function move() {
    time += timeIncrement;
    position = linear(time, startPosition, distance, duration);
    // ...

Dans la première animation, nous avons modifié directement la variable de position. Nous avions besoin d'une valeur d'incrément de position constante. La façon dont nous avons calculé qui est posIncrement = distance / iterations. Avec l'assouplissement, nous ne modifions la variable de position, mais la variable temps. Nous avons donc besoin d'une valeur d'incrément de temps. Nous calculons la même façon que nous avons fait incrément de position, mais cette fois nous diviser duration par iterations. Nous augmentons le temps avec incrément de temps et passer le temps à une fonction d'accélération, et nous faciliter la fonction retourne la position suivante de la boîte doit occuper.

total distance / iterations (frames) = position change per frame
total duration / iterations (frames) = time change per frame

Voici un graphe pour l'oeil.

---

Enfin, un exemple easeInOutQuad.

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 timeIncrement = duration / iterations;
var time          = 0;
var position      = 0;

function move() {
  time += timeIncrement;
  position = easeInOutQuad(time, startPosition, distance, duration);
  if (position >= endPosition) {
    clearInterval(handler);
    box.style.left = endPosition + "px";
    return;
  }
  box.style.left = position + "px";
}

var handler = setInterval(move, 1000 / fps);

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

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

<div id="box"></div>

Answer 4

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

Voici quelques graphiques qui décrivent les jolis petits fonctions d'assouplissement offertes par jquery ui.

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

Answer 5

Croit dans la vie réelle ne fonctionnent pas comme les ordinateurs. PENSE ne pas passer de marche à arrêt et de off à immédiatement comme vous ne pouvez pas prétendre que votre petite amie vous aimerons immédiatement. Ainsi, les scientifiques et les informaticiens (qui ne savent pas quoi que ce soit au sujet de votre petite amie), inventé les fonctions d'accélération. C'est comme d'appliquer ou des trucs instantannée, comme des animations pas de façon immédiate. Donc, si vous déplacez un rectangle de gauche à droite, il ne bouge pas comme un robot: « commencer, déplacer avec une vitesse constante et arrêter immédiatement », mais « Démarrer, la vitesse de encrease constante, la vitesse de diminution constante et enfin cesser ». Donc, l'assouplissement est comme laisser des animations, des fonctions, des objets ou des choses, se comportent comme des choses dans la vie réelle. Chaque effet facilité définit un comportement, c'est la raison pour laquelle nous avons « élastique », « rebondir » effets de la facilité et ainsi de suite.