Сегодня постараюсь на примере показать как написать свою функцию смягчения для 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, но мне так и не удалось узнать, что это
Например, нам необходимо написать функцию смягчения, математическая функция которой будет иметь примерный вид:
, которая состоит из 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/
ссылка на оригинал статьи http://habrahabr.ru/post/208276/
Добавить комментарий