JQuery ослабление функции - понимание переменных

Question

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

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

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

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

Answer 1

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

• x и t оба говорят, какое сейчас время относительно начала анимации. x выражается как число с плавающей запятой в диапазоне [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');

Answer 2

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

Предположим, что наше начальное значение равно 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) должны быть выражены в одной и той же единице, например: здесь «секунды» для нас, но могут быть «мс» илибез разницы.Это также верно для initialValue (b) и amountOfChange (c), поэтому для суммирования:

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

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

Answer 3

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 - достаточно хорошо!

Answer 4

просмотрел код 1.11 jquery. Параметр x, по-видимому, означает «процент», независимо от начального значения времени. Таким образом, x всегда (0 <= x <= 1) (означает абстрактный коэффициент), а t равно x * d (означает прошедшее время). </p>

Answer 5

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