jQuery.easing - easeOutCubic - enfatizando en la facilidad

Question

Estoy usando el complemento jQuery easing de Robert (http://gsgd.co.uk/sandbox/jquery/easing/) y necesito enfatizar o arrastrar el efecto de la facilidad.

Básicamente, quiero que el efecto de la facilidad sea realmente rápido, pero luego se ralentiza mucho durante la relajación.

Creo que puedo hacer esto usando jQuery.easing.easeOutCubic(null, current_time, start_value, end_value, total_time) pero no puedo encontrar la forma de usarlo correctamente.

¿Cómo se puede lograr esto?

Answer 1

No necesita un complemento de aceleración para realizar la aceleración personalizada con jQuery. Solo necesita el código fuente de JavaScript de la función de aceleración que va a utilizar.

Aquí está la función easeOutCubic obtenida del código fuente jQuery UI. Ver this thread for more.

$.easing.easeOutCubic = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

Ahora se puede editar la función y/o cambiar el nombre ...

$.easing.myEasing = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

(Todos los siguientes ejemplos se utiliza un cuadrado azul 375 píxeles con una slideToggle(), de 3 segundos de duración. Se puede alterar los 3 segundos (3000 ms) de duración para demostrar el efecto de su agrado. elegí 3 segundos para que sea suficientemente lento como para ver las diferencias.)

a continuación, sólo lo puso dentro de su jQuery, algo como esto quizá ...

$(document).ready(function(){ 

     $.easing.myEasing = function (x, t, b, c, d) { 
      return c*((t=t/d-1)*t*t + 1) + b; 
     } 

     $("#button").click(function() { 
      $('#myDiv').slideToggle(
       3000, // <-- Animation Duration (3000 ms) 
       'myEasing' // <-- the Name of your easing function 
      ); 
     }); 

}); 

Aquí es una demostración de que el código anterior que contiene la función easeOutCubic renombrado como myEasing y aplicado a un cubo slideToggle() con una segunda duración 3.

http://jsfiddle.net/kJZxQ/

Ok, ahora a su problema: Usted ha dicho que desea "... el efecto facilidad para ser realmente rápido, pero luego ralentizar considerablemente durante la facilidad a cabo."

Aquí es un gráfico de easeOutCubic:

Usted tiene dos opciones, puede manipular la ecuación de aceleración en sí o podemos ver si alguna otra función de aceleración tiene una curva similar, pero más pronunciada (más rápido) hasta la parte de relajación

Esta página de demostración muestra visualmente ti todas las curvas de aceleración ...

http://api.jqueryui.com/easings/

Como se puede ver, varias curvas tienen una forma similar a (7) - easeOutCubic sin embargo, son más pronunciada en la parte delantera. Aquí hay varios ejemplos ...

---

(10) - easeOutQuart easeOutQuart Demo

---

(13) - easeOutQuint easeOutQuint Demo

---

(16) - easeOutExpo easeOutExpo Demo

---

Parece que la última, easeOutExpo es la función de la más empinada disponible. Al comparar las diferencias en las ecuaciones contenidas anteriormente, también podemos manipular la ecuación easeOutExpo para acelerar aún más la curva.

Esta ecuación es costumbre ridícula rápido y luego se ralentiza enormemente ...

http://jsfiddle.net/kJZxQ/11/

Aún más extrema que la anterior ...

http://jsfiddle.net/kJZxQ/12/

aumentado la duración de la última demostración a 6 segundos para exagerar el efecto ...

http://jsfiddle.net/kJZxQ/13/

Al comparar las ecuaciones matemáticas de las demostraciones anteriores, puede ver qué variable está siendo manipulada para mejorar el efecto y hacer sus propios ajustes finos en consecuencia.

Realmente creo que easeOutExpo es más parecido a lo que describes. Básicamente, es su ecuación easeOutCubic pero solo más rápida en la parte delantera y más lenta en el extremo.