jQuery easing function-понимание переменных

Как работает функция смягчения для jQuery? Возьмем для примера:

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};

Как это работает? Что содержит каждый параметр? Как бы я реализовал какое-то тупое смягчение для анимации?

также, как бы я прикрепил шаблон ослабления к jQuery, загружает его в $.ослабление достаточно хорошо?

25
animation easing-functions javascript jquery

5 ответов

согласно источнику jQuery 1.6.2, значение функции смягчения выглядит следующим образом. Функция вызывается в различные моменты времени во время анимации. В мгновение ока она называется:

  • x и t оба говорят, какое время сейчас, относительно начала анимации. х выражается как число с плавающей точкой в диапазоне [0,1], где 0-начало и 1 конец. t выражается в миллисекундах с начала анимации.
  • d является продолжительность анимации, как указано в вызове animate, в миллисекундах.
  • b=0 и c=1.

функция ослабления должна возвращать число с плавающей запятой в диапазоне [0,1], назовите его r. jQuery затем вычисляет x=start+r*(end-start), где start и end являются начальным и конечным значениями свойства, как указано в вызове animate, и он устанавливает значение свойства x.

насколько я вижу, jQuery не дает вам прямого управления когда вызывается функция шага анимации, она позволяет только сказать: "если меня вызывают в момент t, то я должен быть до сих пор через всю анимацию. Поэтому вы не можете, например, просить, чтобы ваш объект перерисовывался чаще, когда он движется быстрее. Кроме того, я не знаю, почему другие люди говорят, что b-начальное значение, а c-изменение-это не то, что говорит исходный код jQuery.

если вы хотите определить свою собственную функцию смягчения, чтобы сделать то же самое, что easeInQuad, для пример,

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

$('#marker').animate({left:'800px'},'slow','myfunc');
38

конкретный пример,

предположим, что наше начальное значение 1000 и мы хотим достичь 400 на 3s:

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

пойдем от 0С до 3С:

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

так по сравнению с синопсисом:

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

мы можем сделать вывод:

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

NB1: одна важная вещь это elapsed(t) и duration(d) должен быть выражен в той же единице, например: здесь 'секунды' для нас, но может быть " ms " или что-то еще. Это также верно для initialValue(b) и amountOfChange(c), так подводя итог:

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

особое примечание 2: Как @DamonJW, я не знаю, почему x здесь. Он не появляется в Пеннер-х и кажется, не используется в результате: Пусть всегда устанавливает его в null

21

t: текущее время, b: начальное значение,c: изменение от начального значения до конечного значения, D: продолжительность.

вот как это работает:http://james.padolsey.com/demos/jquery/easing/ (кривая, представляющая при изменении свойства CSS).

вот как я бы реализовал некоторое тупое ослабление:http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm (математика не моя сильная сторона)

вы бы расширить, как любой из эти: http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29 - достаточно!

5

этот плагин реализует наиболее распространенные функции смягчения:http://gsgd.co.uk/sandbox/jquery/easing/

0

просмотрел код 1.11 jquery. Параметр x, по-видимому, означает "процент", независимо от начального значения времени. Итак, x всегда (0

0