Простой пример: метод угасания желтого цвета

Одним из распространенных применений анимации является метод угасания желтого цвета (http://www.37signals.com/svn/archives/000558.php), когда для измененной области на странице задается желтый цвет фона, который затем постепенно снова возвращается к исходному цвету. Это хороший, ненавязчивый способ показать, что что-то изменилось (например, появился дополнительный контент, или какие-то сообщения обратной связи формы), не мешая тому, что делает пользователь. Посмотрите на пример угасания желтого цвета в действии (http://dev.opera.com/articles/view/javascript-animation/yft_pure_js.html).

Принцип в основе угасания состоит в том, что задается желтый цвет фона элемента угасания, а затем, за некоторую последовательность шагов его цвет возвращается к исходному. Поэтому, если исходный цвет фона был красный, то затем цвет задается желтым, затем оранжево-желтым, затем оранжевым, затем красно-оранжевым, и затем красным. Число использованных шагов определяет, насколько плавно происходит изменение цвета, а время между шагами определяет, как долго продолжается изменение цвета. При изменении цвета можно использовать полезный факт из CSS: цвет можно определить как тройку обычных чисел или как шестнадцатеричную строку. Поэтому #FF0000 (красный цвет) можно определить также как rgb(255,0,0). Изменение от желтого цвета до красного за пять шагов означает, поэтому, переход от rgb(255,255,0) (желтый) к rgb(255,0,0) за пять следующих шагов:

rgb(255,255,0)

rgb(255,192,0)

rgb(255,128,0)

rgb(255,64,0)

rgb(255,0,0)

Вы задаете цвет фона элемента как rgb(255,255,0), затем через какое-то время (предположим, 100 миллисекунд), изменяете цвет фона на rgb(255,192,0), а затем через 100 мс задаете цвет фона как rgb(255,128,0), и т.д.:

Весь процесс занимает 400 мс (меньше чем половина секунды), и получается плавный переход между желтым и красным цветом. Удобно то, что мы изменяем только одну часть цвета (зеленый канал; три части цвета rgb составляют красный, зеленый и синий каналы), но вполне возможно изменение более одного канала. В этом примере значение зеленого канала изменяется от 255 до 0 за четыре шага, что означает изменение его на 64 единицы за каждый шаг.

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

Очевидно, что не всегда требуется изменение от желтого цвета к красному, поэтому функция должна иметь общий вид. Если известны начальный и конечный цвета и число шагов, то изменение цвета на каждом шаге будет определяться обычной математикой. Если определить массив startcolour как список из трех чисел ([255,255,0]), а endcolour как аналогичный список ([255,0,0]), тогда величина изменения каждого цвета на шаге будет:

var red_change = (startcolour[0] - endcolour[0]) / steps;

var green_change = (startcolour[1] - endcolour[1]) / steps;

var blue_change = (startcolour[2] - endcolour[2]) / steps;

Затем мы используем setInterval для изменения цвета фона элемента на шаге:

var currentcolour = [255,255,0];

var timer = setInterval(function(){

currentcolour[0] = parseInt(currentcolour[0] - red_change);

currentcolour[1] = parseInt(currentcolour[1] - green_change);

currentcolour[2] = parseInt(currentcolour[2] - blue_change);

element.style.backgroundColor = 'rgb(' + currentcolour.toString() + ')';

}, 50);

На каждом шаге берем currentcolour и изменяем красный канал на величину red_change, зеленый канал на величину green_change, и синий канал на величину blue_change. Затем задаем для реального цвета фона элемента новый цвет: [255,255,0].toString() будет "255,255,0", поэтому мы используем toString() для создания rgb(255,255,0), и задаем это как цвет фона элемента.

Однако функция setInterval будет вызывать функцию действия бесконечно; она не остановится, когда будет достигнут заданный цвет. Чтобы остановить ее, используйте функцию clearInterval(); следующий код подсчитывает, сколько раз было вызвано действие, и очищает интервал вызова через заданное количество шагов:

var currentcolour = startcolour;

var stepcount = 0;

var timer = setInterval(function(){

currentcolour[0] = parseInt(currentcolour[0] - red_change);

currentcolour[1] = parseInt(currentcolour[1] - green_change);

currentcolour[2] = parseInt(currentcolour[2] - blue_change);

element.style.backgroundColor = 'rgb(' + currentcolour.toString() + ')';

stepcount += 1;

if (stepcount >= steps) {

element.style.backgroundColor = 'rgb(' + endcolour.toString() + ')';

clearInterval(timer);

}

}, 50);

Так и делается анимация: небольшие изменения на одном шаге.

Как задать startcolour и endcolour? Один простой способ состоит в размещении приведенного выше кода в функции fade:

fade: function(element, startcolour, endcolour, time_elapsed) {

...приведенный выше код ...

}

а затем можно запускать угасание желтого цвета на элементе с помощью вызова функции следующего вида:

fade(document.getElementById("yft"), [255,255,60], [0,0,255], 750);

или "угасание красного цвета", которое задает для элемента красный цвет и затем угасает до синего (цвет фона элемента), следующим образом:

fade(document.getElementById("yft"), [255,0,0], [0,0,255], 750);

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