jQuery.easing - easeOutCubic - podkreślając łatwość

Question

Używam plugin jQuery easing autorstwa Roberta (http://gsgd.co.uk/sandbox/jquery/easing/) i muszę podkreślić lub przeciągnąć efekt łatwości.

Zasadniczo chcę, aby efekt łatwości był naprawdę szybki, ale potem znacznie spowolnić w trakcie łagodzenia.

Wierzę, że mogę to zrobić, używając jQuery.easing.easeOutCubic(null, current_time, start_value, end_value, total_time), ale nie mogę wymyślić, jak prawidłowo go używać.

Jak można to osiągnąć?

Answer 1

Nie potrzebujesz wtyczki ułatwiającej wykonanie niestandardowego poluzowania za pomocą jQuery. Potrzebujesz tylko źródłowego kodu JavaScript z jedną z funkcji, którą zamierzasz użyć.

Oto funkcja easeOutCubic uzyskana z kodu źródłowego jQuery UI. Zobacz this thread for more.

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

Teraz można zmieniać funkcji i/lub zmienić jego nazwę ...

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

(Wszystkie poniższe przykłady użyć 375 pikseli niebieski kwadrat z slideToggle() 3 drugi czas. You można zmieniać 3 sekundy (3000 ms) czas trwania wykazać efekt do własnych upodobań. wybrałem 3 sekundy, aby go zwolnić na tyle, aby zobaczyć różnice.)

Następnie wystarczy umieścić go wewnątrz jQuery, coś takiego może ...

$(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 
      ); 
     }); 

}); 

Oto demo z powyższym kodem, który zawiera funkcję easeOutCubic przemianowany jako myEasing i nałożono na slideToggle() sześcianu o długości 3 sekund.

http://jsfiddle.net/kJZxQ/

Ok, teraz do problemu „... efekt łatwość być naprawdę szybka, ale potem znacznie spowolnić podczas łatwości out” Mówiłeś, że chcesz

Oto wykres easeOutCubic:

Masz dwie opcje, można się manipulować równanie złagodzenie lub możemy zobaczyć, czy jakaś inna funkcja łagodnego ma podobną krzywą, ale stromy (szybciej), aż część łatwości.

Ta strona demo wizualnie pokazuje wszystkie złagodzenie krzywe ...

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

Jak widać, kilka krzywe mają kształt podobny do (7) - easeOutCubic jeszcze są bardziej strome na przednim końcu. Oto kilka przykładów ...

---

(10) - easeOutQuart easeOutQuart Demo

---

(13) - easeOutQuint easeOutQuint Demo

---

(16) - easeOutExpo easeOutExpo Demo

---

Wydaje się, że ostatni, easeOutExpo jest stroma Funkcja Zdjęcie dostępne. Porównując różnice w równaniach zawartych powyżej, możemy również manipulować równaniem easeOutExpo, aby jeszcze bardziej wysunąć krzywą.

Ten zwyczaj równanie jest śmiesznie szybko, a następnie zwalnia ogromnie ...

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

Jeszcze bardziej skrajne niż ostatnio ...

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

Czas trwania wzrósł na ostatniej demo do 6 sekund, aby wyolbrzymić efekt ...

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

Porównując matematyczne równania powyższych demonstracji, można zobaczyć, która zmienna jest poddawana manipulacjom, aby wzmocnić efekt i odpowiednio dostosować własne precyzyjne korekty.

Naprawdę uważam, że easeOutExpo jest bardziej podobny do tego, co opisujesz. Zasadniczo jest to równanie easeOutCubic, ale tylko szybciej z przodu i wolniej na końcu.