En las aplicaciones de juegos, hay muchos objetos que se mueven del punto A al B de forma lineal, pero después de aplicar una aceleración, puede hacer que se vea más natural. Una función de aceleración le dice a la animación sobre su progreso. Un movimiento recto puede tomar una forma interesante.
Las funciones de aceleración son las funciones que controlan la velocidad de la animación o especifican la tasa de cambio de un parámetro a lo largo del tiempo para finalmente dar el efecto deseado. Las ecuaciones dan como resultado un movimiento lento al principio y una aceleración o desaceleración cerca del final. El conjunto más común de ecuaciones de aceleración proviene de la página web de Robert Penner .
El método easyInBack() se usa para retroceder lentamente.
Sintaxis:
easeInBack(t, b, c, d)
Parámetros: Este método acepta cuatro parámetros como se mencionó anteriormente y se describe a continuación.
- t: este parámetro contiene el tiempo especificado cuando comenzará la animación. Por ejemplo, si el valor de t es 0, significa que la animación acaba de comenzar.
- b: Este parámetro mantiene la posición inicial especificada del objeto en el eje x. Por ejemplo, si el valor de b es 10, significa que la posición inicial de los objetos en la coordenada x es 10.
- c: este parámetro contiene el cambio especificado en el valor del objeto. Por ejemplo, si el valor de c es 30, significa que el objeto debe moverse 30 a la derecha, terminando en 40.
- d: este parámetro contiene la duración especificada de todo el proceso. Por ejemplo, si el valor de d es 2, significa que el objeto tiene 2 segundos para realizar este movimiento de 10 a 40.
Valor devuelto: este método devuelve la posición relajada del objeto, es decir, la posición del objeto en un momento específico.
Ejemplo 1:
Javascript
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// Initializing easeInBack() function
function easeInBack (t, b, c, d) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
}
// Calling the easeInBack() function over
// the specified parameter values
console.log(fabric.util.ease.easeInBack(1, 2, 3, 4));
</script>
</body>
</html>
Producción:
1.8075903125
Ejemplo 2:
Javascript
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<script type="text/javascript">
// Initializing easeInBack() function
function easeInBack (t, b, c, d) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
}
// Initializing the parameters with its values
var t = 5;
var b = 10;
var c = 40;
var d = 12;
// Calling the easeInBack() function over
// the specified parameter values
console.log(fabric.util.ease.easeInBack(t, b, c, d));
</script>
</body>
</html>
Producción:
6.000543981481481
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA