Что такое функция смягчения?

функция смягчения обычно является функцией, которая описывает значение свойства, заданного в процентах от полноты. Различные фреймворки используют несколько разные варианты, но концепцию легко понять, как только вы получите идею, но, вероятно, лучше всего посмотреть несколько примеров.

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

наши ослабляя функции примут несколько аргументов:

• percentComplete: (0.0 to 1.0).
• elaspedTime: количество миллисекунд анимации работает
• startValue: значение для начала (или значение, когда процент завершения равен 0%)
• endValue: значение для завершения (или значение, когда процент завершения составляет 100%)
• totalDuration: общая желаемая длина анимации в миллисекундах

и возвращает число, представляющее значение свойства должно быть установлено.

Примечание: это та же подпись, которую jQuery использует для своих функций смягчения, которые я буду заимствовать для примеров.

проще всего понять линейную легкость:

var linear = function(percent,elapsed,start,end,total) {
    return start+(end-start)*percent;
}

а теперь, чтобы использовать это:

допустим, у нас была анимация, которая должна была идти в течение 1000 миллисекунд и должна была начинаться с 0 и заканчиваться на 50. Передача этих значений в нашу функцию смягчения должна сказать нам, какое фактическое значение должно быть:

linear(0, 0, 0,50, 1000)        // 0
linear(0.25, 250, 0, 50, 1000)  // 12.5
linear(0.5, 500, 0, 50, 1000)   // 25
linear(0.75, 750, 0, 50, 1000)  // 37.5
linear(1.0, 1000, 0, 50, 1000)  // 50

это довольно прямолинейный (без каламбура) tween. Это простая линейная интерполяция. Если бы вы должны были изобразить значение против времени, это была бы прямая линия:

давайте взглянем на немного более сложную функцию смягчения, квадрадическую легкость в:

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

и давайте посмотрим на те же результаты, используя те же входные данные, что и раньше:

easeInQuad(0, 0, 0, 50, 1000)      // 0
easeInQuad(0.25, 250, 0, 50, 1000) // 3.125
easeInQuad(0.5, 500, 0, 50, 1000)  // 12.5
easeInQuad(0.75, 750, 0, 50, 1000) // 28.125
easeInQuad(1, 1000, 0, 50, 1000)   // 50

обратите внимание, что значения очень отличаются от наших линейная легкость. Он начинается очень медленно, затем ускоряется до конечной точки. При 50% завершении анимации он только добрался до значения 12.5, что составляет четверть фактического расстояния между start и end ценности, которые мы указали.

если график этой функции будет выглядеть так:

теперь давайте посмотрим на базовую простоту:

var easeOutQuad = function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
};

это по существу делает "противоположная" кривая ускорения легкости. Он начинается быстро, а затем замедляется до конечного значения:

а еще есть функции, которые облегчают и:

var easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};

эта функция начнет медленно и закончится медленно, достигнув максимальной скорости в середине.

есть куча ослаблений / интерполяций, которые вы можете использовать: линейный, Квадрадический, кубический, Кварта, Квинта, синуса. И там специальность ослабляя функции как прыжок и Эластик, которые имеют их.

например, эластичная легкость в:

var easeInElastic = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},

возможно, кто-то еще может объяснить фактическую математическую часть интерполяции, потому что, честно говоря, я не математик. Но это основной принцип самих функций смягчения.

при запуске анимации / анимации движок анимации запоминает начальное и конечное значения, которые вы хотите. Затем каждый раз, когда он обновляется, его цифры из того, сколько времени прошло. Он вызывает предоставленную функцию смягчения со значениями, чтобы выяснить значение, которое должно быть установлено свойство. До тех пор, пока все функции смягчения реализуют одну и ту же подпись, их можно легко заменить, и ядро анимационного движка не должно знать разницы. (Что делает для отличного разделения забот).

Вы заметите, что я избегал говорить о x и y позиции явно, потому что ослабление не имеет ничего общего с позицией per se. Функцию плавности просто определяет переход между начальным и конечным значениями. Это может быть x координаты, или цвет, или прозрачность объекта.

и на самом деле, теоретически, вы можете применить другую функцию смягчения для интерполяции для разных свойств. Надеюсь, это поможет пролить свет на основную идею.

и вот действительно классный пример (который использует немного другую подпись, но тот же Принципал), чтобы играть, чтобы получить представление о том, как ослабление относится к позиции.

редактировать

вот немного jsFiddle я собрал вместе, чтобы продемонстрировать некоторые из основных обычаев в javascript. Обратите внимание, что top свойство tweened с помощью bounce, и left свойство tweened с помощью quad. Используйте ползунок для имитации цикл визуализации.

так как все функции в easing объект имеет одинаковую подпись, вы можете поменять любой из них друг для друга. Сейчас большинство из этих вещей жестко закодированы (например, начальные и конечные значения, используемые функции tween и длина анимации), но в реальном примере помощника анимации вы хотели бы передать следующие свойства:

• свойство, которое необходимо изменить
• начальное значение (или если оставить undefined затем используйте его текущее значение)
• конечное значение
• длина анимации должна быть
• ссылка на функцию tweening, которую вы хотите использовать.

анимационный движок будет отслеживать эти параметры в течение всей анимации и во время каждого цикла обновления он будет использовать аргумент tweening для вычисления нового значения свойств.