Функция ускорения jQuery - понимание переменных

Ответ 1

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

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

Ответ 2

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

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

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

Перейдите от 0s до 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

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

$.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 здесь. Он не появляется в уравнениях Penner и делает похоже, не используется в результате: пусть всегда устанавливает его в null

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

Ответ 4

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

Ответ 5

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