En juegos o animaciones, hay muchos objetos en movimiento que pueden moverlos del punto A al B de forma lineal, pero después de aplicar la función de aceleración, puede hacer que se vea más natural. Una función de aceleración dice una animación de cómo progresar. De esta manera, un movimiento rectilíneo puede tomar una forma interesante.
Las funciones de aceleración especifican la tasa de cambio de un parámetro a lo largo del tiempo. Son cuyas ecuaciones hacen que algo se mueva lentamente al principio y se acelere o disminuya la velocidad cerca del final. El conjunto más común de ecuaciones de aceleración proviene del libro y la página web de Robert Penner.
El método easyInElastic() se utiliza para la relajación elástica.
Sintaxis:
easeInElastic(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 de valor especificado para el 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:
HTML
<!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 easeInElastic() function
function easeInElastic(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;
}
// Calling the easeInElastic() function
// over the specified parameter values
console.log(fabric.util.ease
.easeInElastic(1, 2, 3, 4));
</script>
</body>
</html>
Producción:
1.9834271848159404
Ejemplo 2:
HTML
<!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 easeInElastic() function
function easeInElastic(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;
}
// Initializing the parameters
// with its values
var t = 5;
var b = 10;
var c = 40;
var d = 12;
// Calling the easeInElastic() function
// over the specified parameter values
console.log(fabric.util.ease
.easeInElastic(t, b, c, d));
</script>
</body>
</html>
Producción:
10.659230814942847
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