Главная

jQuery Easing. Пользовательские easing’и

2014-01-06 в 17:33, admin, рубрики: javascript, jquery, анимация, Веб-разработка, метки: javascript, jquery, анимация

Доброго времени суток!
Сегодня постараюсь на примере показать как написать свою функцию смягчения для jQuery. Кому интересно — под кат.

Думаю, многие из вас знакомы с таким понятием как смягчение или ослабление (easing).

Для тех, кто не в курсе

В контексте jQuery, а в частности анимации, easing — это функция определяющая поведение вашей анимации во времени, т.е. зависимость значения от времени (на самом деле, при необходимости, ещё от набора параметров).
По умолчанию в jQeury есть 2 функции смягчения: normal и swing.
Для расширения «ассортимента» можно воспользоваться плагином jQuery Easing Plugin (Шпаргалка). Для большинства случаев этого достаточно. Для остальных случаев — читаем дальше.

Функция имеет вид:

function (x, t, b, c, d) {
	/*магия расчетов*/  
	return value;
}

, где x — текущее значение прогресса анимации (от 0 до 1)
t — текущее время,
b — начальное значение x (обычно 0),
c — конечное значения x (обычно 1),
d — общая протяженность анимации.
Примечание: в jQuery Easing Plugin мне встретился ещё параметр s, но мне так и не удалось узнать, что это

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

jQuery Easing. Пользовательские easingи
, которая состоит из 7 функций:
3 функции y = x,
3 функции y = -x,
1 функция y = sin(x).
Примечание: для последней функции для примера использовалась другая функция смягчения

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

jQuery.extend( jQuery.easing, {
    testEasing: function (x, t, b, c, d) {
        var extr = [[.4,.4],[.5,.3],[.6,.4],[.7,.3],[.8,.4],[.9,.3]];
        if (x < extr[0][0]) return b + c*x;
        if (x < extr[1][0]) return b + c*(extr[0][1] - (x - extr[0][0]));
        if (x < extr[2][0]) return b + c*(extr[1][1] + (x - extr[1][0]));
        if (x < extr[3][0]) return b + c*(extr[2][1] - (x - extr[2][0]));
        if (x < extr[4][0]) return b + c*(extr[3][1] + (x - extr[3][0]));
        if (x < extr[5][0]) return b + c*(extr[4][1] - (x - extr[4][0]));
        return b + extr[5][1] + jQuery.easing.easeInSine(x, (t - extr[5][0]*d), b, c, d - d * extr[5][0]);
    },
    // Функция easeInSine взята из jQuery Easing Plugin
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    }
});

Результат работы функции: jsfiddle.net/5EGZR/16/

Автор: Dimcore

Источник