¿Qué son las funciones de aceleración?

15

Encontré este sitio web genial para el desarrollo de juegos y tiene una lista de funciones de facilitación:

ingrese la descripción de la imagen aquí

Aunque el sitio contiene una descripción de para qué sirven, se me pasa por la cabeza. ¿Qué son las funciones de aceleración y para qué se utilizan?

Actualizar

Encontré un mejor ejemplo de las funciones del código fuente de Phaser.io . Estas funciones son mucho más simples de lo que sugerirían las respuestas aquí. Sólo pueden llevar un parámetro, k. Como parte de la respuesta, me gustaría saber cómo usarlos.

Daniel Kaplan
fuente
2
Un término relacionado importante es interpolación. ¡Vea también este video youtube.com/watch?v=Fy0aCDmgnxg donde puede ver cuán enorme es el efecto de las funciones de interpolación y flexibilización!
Roy T.

Respuestas:

13

Las funciones de aceleración se usan para la interpolación, típicamente (pero no necesariamente) en animación / movimiento cinemático. La interpolación lineal (lerp) es algo de lo que puede haber oído hablar. Supongamos que mueve una carita sonriente de una esquina de la pantalla a otra (de acuerdo con su imagen). Esto significa que el smiley se moverá a una velocidad constante desde el punto A hasta el punto B. Si aplicara esto al movimiento de una extremidad, se vería muy robótico y antinatural: los actuadores / servos que usan los robots, actúen de esta manera. Obviamente, las extremidades humanas se mueven de una manera muy diferente. Y la mayoría del movimiento que verá en la naturaleza tendrá curvas de movimiento interesantes, en lugar de la velocidad constante e inmutable que se ve en la interpolación lineal.

Entra en relajación. El movimiento suave significa que la velocidad no es constante. Lo que esto logra es parecer más realista. Observe a las personas, observe a diferentes animales, observe a las plantas doblarse en el viento o incluso cómo la lluvia cambia de dirección en un día ventoso. Observe la velocidad de una pelota mientras la lanza al aire y vuelve a bajar. Observe el movimiento de una cuerda de guitarra mientras la toca. Cada uno de estos tipos de movimiento tiene una curva diferente que describe la velocidad.

Le sugiero que juegue con el GSAP de GreenSock en línea para tener una idea de lo que producen los diferentes tipos de curvas de relajación en términos de movimiento. Es una de esas cosas en las que lleva tiempo y práctica mapear una curva con nombre en particular al tipo de movimiento que imagina que desea. Pero una vez que hayas entendido lo básico, te divertirás mucho.

PD: Como dije, la relajación no solo se usa para la animación. Se puede usar para la panoramización del sonido, para efectuar el movimiento esquelético en el nivel lógico / modelo, o cualquier otra cosa que se le ocurra que pueda necesitar una variación suave específica con el tiempo.

Ingeniero
fuente
1
btw Easing es la segunda diapositiva en el enlace GreenSock. Use el menú desplegable en la diapositiva para probar diferentes funciones de aceleración.
jhocking
8

Una función de aceleración le permite interpolar valores de un valor a otro durante un intervalo dado usando algo llamado "función de aceleración". Estas son funciones que están diseñadas para tomar un valor y, en cualquier punto dado del intervalo, emitir el valor en un determinado momento.

Esto se puede explicar mejor observando un fragmento de código:

// simple linear tweening - no easing, no acceleration


Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

@t es la hora actual (o posición) de la interpolación. Pueden ser segundos o cuadros, pasos, segundos, ms, lo que sea, siempre que la unidad sea la misma que la utilizada durante el tiempo total.

@b es el valor inicial de la propiedad.

@c es el cambio entre el valor inicial y de destino de la propiedad.

@d es el tiempo total de la interpolación.

Gracias, http://upshots.org/actionscript/jsas-understanding-easing

Esta es la definición de una función de aceleración lineal. Graficando esto a lo largo del tiempo en términos de 't' obtenemos un simple gráfico lineal.

De acuerdo, genial. ¿Para qué podemos usarlos?

Cada vez que tenga en mente un comienzo y un final y desee animarlos, puede usar una "interpolación" o "función de relajación".

Por ejemplo, aquí hay un GIF que acabo de tomar de Angry Birds:

ingrese la descripción de la imagen aquí

¿Notó que el menú se desliza hacia el punto en la pantalla, pero se detiene lentamente? Esto se debe a una función de relajación que se acomoda en su lugar. Puedes verlos en toda la web. Si esto fuera una facilidad lineal, sería lo mismo en todas partes.

¿Música?

¡Seguro! Si tomamos el valor de nuestro valor de banda sonora actual y lo interpolamos entre eso y 0 en un total de t de 1 segundo, entonces nuestro volumen se desvanecerá lentamente durante un período de un segundo.

Objetos delimitadores

También hay funciones que permiten el rebote (ver: http://easings.net/#easeOutBounce ) que pueden producir efectos como este en un sprite sin ningún sistema físico:

ingrese la descripción de la imagen aquí

Puede encontrar más información en la web buscando interpolaciones.

Vaughan Hilts
fuente
@tieTYT He agregado una explicación para ti. ¿Qué tipo de ejemplo de uso estás buscando?
Vaughan Hilts
Mira mi actualización. Si puede explicar cómo usar las funciones que solo toman kcomo parámetro, aceptaré esta respuesta. Gracias
Daniel Kaplan
Estas funciones no solo toman k. Las funciones iniciales usan estas que luego se pasan a otras más complicadas. ¿Estás interesado en la implementación de phasers?
Vaughan Hilts
Parece que todos kme llevan . ¿Dónde estás viendo lo contrario?
Daniel Kaplan
Todas las funciones de aceleración (excepto quizás interpolaciones de estilo 'agitar') requieren un mínimo de tres parámetros. Tiempo (generalmente una relación entre 0 y 1), un valor inicial y un valor final. A veces, el tiempo se divide en dos parámetros, como el tiempo actual y la duración de la facilidad. Si los valores de inicio y finalización ya se han definido (dependiendo de su sistema / biblioteca de aceleración), es posible que solo necesite pasar el tiempo, pero yo tampoco estoy familiarizado con ninguno. Por ejemplo, si quisiera el valor entre 10 y 30 al 75% del camino (3 segundos en una facilidad de 4 segundos), necesito pasar el 10 y el 30, y también el 75% (tiempo / dur).
Doug.McFarlane
2

Las funciones de aceleración sirven para cambiar un valor durante un período de tiempo, de un número inicial a un número final.

Utiliza ese valor para animar una propiedad de un objeto en su juego, como posición, rotación, escala, cambio de colores y otras propiedades que usan un valor.

Las diferentes funciones de aceleración determinan la "sensación" de la animación, o cómo cambia el valor con el tiempo.

En el sitio web que publicó, el gráfico muestra que el valor cambia con el tiempo de principio a fin, por lo que no significa que el objeto que está animando seguirá el camino de la pelota en el gráfico.

ino
fuente
¡Oh, ahora cambiaste tu respuesta para reflejar la mía! Muy bueno ver que estás aprendiendo.
Ingeniero
Esta respuesta parece más una referencia que un tutorial. Necesito ejemplos para tener una mejor comprensión
Daniel Kaplan
@NickWiggill no, ni siquiera vi tu respuesta hasta ahora.
ino