Fabric.js método easyOutBack()

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 Easing, 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 ese tipo de ecuaciones que se mueven lentamente al principio y se aceleran, y se ralentizan al final. Este conjunto de ecuaciones está tomado del libro y la página web de Robert Penner.

El método easyOutBack() se usa para retroceder.

Sintaxis:

easeOutBack(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:

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 easeOutBack() function
 function easeOutBack (t, b, c, d) {
    if (s == undefined) s = 1.70158;
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
 }
  
 // Calling the easeOutBack() function over
 // the specified parameter values
 console.log(fabric.util.ease.easeOutBack(1, 2, 3, 4)); 
</script>
  
</body>
  
</html>

Producción:

4.452229062500001

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 easeOutBack() function
 function easeOutBack (t, b, c, d) {
    if (s == undefined) s = 1.70158;
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
 }
   
 // Initializing the parameters with its values
 var t = 5;
 var b = 10;
 var c = 40;
 var d = 12;
  
 // Calling the easeOutBack() function over
 // the specified parameter values
 console.log(fabric.util.ease.easeOutBack(t, b, c, d)); 
</script>
  
</body>
  
</html>

Producción:

51.71034953703704

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *