En la animación y los juegos, se puede ver que muchos objetos se mueven de un punto a otro de forma lineal. Pero después de usar la función de aceleración, la forma de progresar del objeto puede tomar una forma natural e interesante diferente.
Las funciones de aceleración son la tasa de cambio de un parámetro a lo largo del tiempo. Es el tipo de ecuaciones que se mueven lentamente al principio y se aceleran y se ralentizan al final. Estos conjuntos de ecuaciones están tomados del libro y la página web de Robert Penner.
El método easyOutQuart() se utiliza para la relajación cuártica.
Sintaxis:
easeOutQuart(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 de inicio de 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 de inicio 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 determinado.
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 easeOutQuart() function
function easeOutQuart (t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
// Calling the easeOutQuart() function over
// the specified parameter values
console.log(fabric.util.ease.easeOutQuart(1, 2, 3, 4));
console.log(fabric.util.ease.easeOutQuart(1, 3, 5, 7));
console.log(fabric.util.ease.easeOutQuart(2, 4, 6, 8));
</script>
</body>
</html>
Producción:
4.05078125 5.30112453144523 8.1015625
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 easeOutQuart() function
function easeOutQuart (t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
// Initializing the parameters with its values
var t1 = 5;
var b1 = 10;
var c1 = 40;
var d1 = 12;
var t2 = 2;
var b2 = 12;
var c2 = 10;
var d2 = 15;
// Calling the easeOutQuart() function over
// the specified parameter values
console.log(fabric.util.ease.easeOutQuart(t1, b1, c1, d1));
console.log(fabric.util.ease.easeOutQuart(t2, b2, c2, d2));
</script>
</body>
</html>
Producción:
45.36844135802469 16.35832098765432
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