funkcja jQuery easing - rozumienie zmiennych

Jak działa funkcja easing dla jQuery? Weźmy na przykład: 

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};
Jak to działa? Co zawiera każdy parametr? Jak zaimplementować jakieś głupie luzowanie do animacji?

Również jak załączyć wzór do jQuery, jest ładowanie go do $.luzowanie wystarczy?

Author: abernier, 2011-05-06
Source

5 answers

Zgodnie ze źródłem jQuery 1.6.2, znaczenie funkcji easing jest następujące. Funkcja jest wywoływana w różnych momentach w czasie animacji. Na początku nazywa się,

  • x I T mówią, jaka jest teraz godzina, w stosunku do początku animacji. x wyraża się jako Liczba zmiennoprzecinkowa z zakresu [0,1], gdzie 0 jest początkiem, a 1 końcem. t jest wyrażone w milisekundach od początku animacji.
  • d jest czasem trwania animacja określona w wywołaniu programu animate w milisekundach.
  • b = 0 i c = 1.

Funkcja easing powinna zwracać liczbę zmiennoprzecinkową z zakresu [0,1], nazwij ją r. następnie jQuery oblicza x=start+r*(end-start), Gdzie start i end są wartościami początkowymi i końcowymi właściwości określonej w wywołaniu programu animate i ustawia wartość właściwości na x.

Z tego co widzę, jQuery nie daje bezpośredniej kontroli nad wywołaniem funkcji animation step, to pozwala tylko powiedzieć: "jeśli jestem wezwany w czasie t, to powinienem być tak daleko przez całą animację."Dlatego nie można, na przykład, prosić o częstsze przerysowywanie obiektu w momentach, gdy porusza się on szybciej. Poza tym, Nie wiem, dlaczego inni ludzie mówią, że b jest wartością początkową, a c jest zmianą - nie tak mówi kod źródłowy jQuery.

Jeśli chcesz zdefiniować własną funkcję easing, aby wykonywała to samo, co na przykład easeInQuad, 

$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$('#marker').animate({left:'800px'},'slow','myfunc');
 38
Author: DamonJW,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-26 02:48:45

Konkretny przykład,

Załóżmy, że nasza wartość początkowa wynosi 1000 i chcemy dotrzeć 400 W 3s : 

var initialValue = 1000,
    destinationValue = 400,
    amountOfChange = destinationValue - initialValue, // = -600
    duration = 3,
    elapsed;

Przejdźmy od 0s do 3s: 

elapsed = 0
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 1000

elapsed = 1
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 933.3333333333334

elapsed = 2
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 733.3333333333334

elapsed = 3
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 400

Więc w porównaniu do synopsis: 

$.easing.easeInQuad = function (x, t, b, c, d) {...}

Możemy wydedukować: 

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration

NB1: jedną ważną rzeczą jest to, że elapsed(t) oraz duration(d) powinny być wyrażone w tej samej jednostce, np.: tutaj 'sekundy' dla nas, ale może być ' ms ' lub cokolwiek innego. Dotyczy to również initialValue(b) oraz amountOfChange(c), podsumowując: 

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration
         ^          ^              ^            ^
         +----------|----=unit=----|------------+
                    +----=unit=----+

NB2: jak @DamonJW , Nie wiem dlaczego x jest tutaj. Nie pojawia się w równaniach Pennera i nie wydaje się być używane w rezultacie: ustawmy go zawsze nanull

 21
Author: abernier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:00:16

T: bieżący czas, b: wartość początkowa, c: zmiana z wartości początkowej na wartość końcową, d: czas trwania.

Oto jak to działa: http://james.padolsey.com/demos/jquery/easing / (krzywa przedstawiająca zmianę właściwości CSS).

Oto jak zaimplementowałbym jakieś głupie luzowanie: http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm (Matematyka nie jest moją mocną stroną)

Rozszerzyłbyś jak każdy z tych: http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29{[4]- wystarczy!

 5
Author: two7s_clash,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-06 21:58:47

Ten plugin implementuje najpopularniejsze funkcje easingu: http://gsgd.co.uk/sandbox/jquery/easing/

 0
Author: gblazex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-06 20:40:07

Przejrzałem kod jquery 1.11. Parametr x wydaje się oznaczać "procent", niezależnie od początkowej wartości czasu. Tak więc, x jest zawsze (0

 0
Author: Kirill Kharchenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-02 16:48:23