Qu'est-ce qu'une fonction d'assouplissement?

Question

Qu'entend-on par l'assouplissement de la fonction dans le contexte de l'animation. Il semble que, dojo, jquery, silverlight, flex et d'autres de l'INTERFACE utilisateur des systèmes ont la notion de l'assouplissement de la fonction. J'ai pas pu trouver une bonne explication des fonctions d'accélération? Quelqu'un peut-il expliquer le concept de fonctions d'accélération, ou le point une bonne explication, je suis intéressé par le concept qui n'est pas dans les détails spécifiques d'un cadre?

Est assouplissement strictement utilisée pour l'emplacement ou il est générale et peut être appliquée à n'importe quelle propriété d'un objet?

Answer 1

Un assouplissement de la fonction est généralement une fonction qui décrit la valeur d'un bien donné un pourcentage de complétude. Les différents cadres de l'utilisation des variations légèrement différentes, mais le concept est facile à comprendre une fois que vous obtenez l'idée, mais c'est probablement mieux de regarder quelques exemples.

D'abord, permet de regarder au niveau de l'interface que l'ensemble de nos fonctions d'accélération respecter.

Nos fonctions d'accélération va prendre plusieurs arguments:

• percentComplete: (0.0 de 1.0).
• elaspedTime: Le nombre de millisecondes de l'animation a été en cours d'exécution
• startValue: la valeur de début (ou de la valeur lorsque le pourcentage est de 0%)
• endValue: la valeur de fin (ou de la valeur lorsque le pourcentage est de 100%)
• durée totale: la somme de La longueur désirée de l'animation en millisecondes

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

Remarque: c'est la même signature que jQuery utilise pour ses fonctions d'accélération, ce qui, je vais d'emprunt pour des exemples.

Le plus facile à comprendre, c'est un linéaire de facilité:

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

Et maintenant, pour mettre cela à utiliser:

Disons que nous avons eu une animation qui va aller pour 1000 millisecondes et était supposé commencer à 0 et à la fin à 50. En transmettant ces valeurs dans notre assouplissement de la fonction devrait nous dire ce que 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

C'est un assez simple (aucun calembour prévu) interpolation. C'est une simple interpolation linéaire. Si vous étiez le graphique de la valeur de vs le temps, ça serait une ligne droite:

Permet de jeter un oeil à un peu plus compliqué assouplissement de la fonction, un quadradic l'aise dans:

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:

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 très différente de celle de nos linéaire facilité. Il commence très lentement, puis accélère à son point d'arrivée. À 50% à l'achèvement de l'animation, il n'a fait qu'une valeur de 12,5, ce qui est un quart de la distance réelle entre l' start et end valeurs, nous avons spécifié.

Si nous étions pour tracer le graphique de cette fonction, il ressemblerait à quelque chose comme ceci:

Maintenant, permet de jeter un coup d'oeil à une base ease-out:

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

Essentiellement, cela ne l' "en face de" l'accélération de la courbe d'une facilité dans. Il démarre vite, et puis décélère à sa valeur finale:

Et puis il y a la fonction que l'aise à la fois dans et à l'extérieur:

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 démarre lentement, et à la fin lente, atteignant son maximum de vitesse dans le milieu.

Il ya un tas d'assouplissement/interpolations que vous pouvez utiliser: Linéaire, Quadradic, Cubes, Quart, Quint, Sine. Et il y a la spécialité de l'assouplissement des fonctions comme le Rebond et élastique, qui ont leur propre.

Par exemple, un élastique d'aisance 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*d-s)*(2*Math.PI)/p )) + b;
},

Peut-être quelqu'un d'autre peut expliquer le réel en mathématiques derrière l'interpolation, parce que honnêtement, je ne suis pas un mathématicien de génie. Mais c'est le principe de base de la baisse des fonctions elles-mêmes.

Lorsque vous démarrez une interpolation/animation, le moteur d'animation se souvient de début et de fin que vous voulez. Ensuite, à chaque fois qu'il les mises à jour, ses figures de combien de temps a passé. Il a fait appel fournie assouplissement de la fonction avec les valeurs de comprendre la valeur de la propriété doit être définie. Tant que toutes les fonctions d'accélération de mettre en œuvre la même signature, ils peuvent être échangées avec facilité, et le noyau moteur d'animation n'est pas nécessaire de connaître la différence. (Ce qui rend pour une excellente séparation des préoccupations).

Vous remarquerez que j'ai évité de parler d' x et y des positions explicitement, en raison de l'assouplissement n'a pas de quoi que ce soit à voir avec la position de soi. Un assouplissement de la fonction définit une transition entre les valeurs début et fin. Ceux - x coordonnées, ou une couleur, ou la transparence d'un objet.

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

Et ici, c'est un vraiment cool exemple (qui utilise un peu différente de la signature, mais c'est le même principe) pour jouer avec pour se faire une idée de la façon dont l'assouplissement se rapporte à la position.

---

Modifier

Voici un petit jsFiddle j'ai jeté à démontrer certains des usages de base en javascript. Notez que l' top propriété est interpolé à l'aide de rebondir, et l' left propriété est interpolé à l'aide d'un quad. Utilisez le curseur pour simuler le rendu de la boucle.

Depuis toutes les fonctions de l' easing objets ont la même signature, vous pouvez échanger l'un d'eux les uns des autres. Pour l'instant la plupart de ces choses sont toutes codées en dur (des choses comme les valeurs début et fin, l'interpolation des fonctions qui sont utilisées et la durée de l'animation), mais dans un monde réel exemple d'une animation helper, vous souhaitez passer dans les propriétés suivantes:

• La propriété d'être changé
• La valeur de départ (ou si gauche undefined alors utiliser sa valeur actuelle)
• La valeur de fin
• La longueur de l'animation doit être
• La référence à la fonction d'interpolation que vous souhaitez utiliser.

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

Answer 2

Une fonction d'accélération est un algorithme qui contrôle la vitesse d'une animation pour produire l'effet désiré (rebondir, zoomer et ralentir, etc.).

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

Answer 3

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

Voici quelques petits graphiques bien détaillés décrivant les fonctions d’assouplissement offertes par jquery ui.

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

Answer 4

Pense que dans la vie réelle ne fonctionnent pas comme les ordinateurs. Pense ne mettez pas en marche et en arrêt, immédiatement, comme on ne peut pas prétendre que Votre petite amie Vous aime immédiatement. Les scientifiques et l'ordinateur des gens qui ne connaissent rien à propos de Votre amie), inventé les fonctions d'accélération. C'est comme pour l'appliquer ou de l'interrupteur des trucs comme les animations pas de façon immédiate. Donc, si Vous déplacez un rectangle à partir de la gauche vers la droite, il ne se déplace pas comme un robot: "démarrer , se déplace avec une vitesse constante et de cesser immédiatement", mais "au Début, augmenter la vitesse constante, la diminution de la vitesse constante et arrêter enfin". Afin d'assouplissement est comme laisser des animations, des fonctions, des objets ou des choses, de se comporter comme des trucs dans la vraie vie. Chaque facilité effet définit un comportement, c'est pourquoi nous avons "élastique", "de rebondir" la facilité des effets et ainsi de suite.