Шрифт:
// анимацию гладкой, воспроизводя ее со скоростью 40 кадров/сек.
setTimeout(animate, Math.min(25, time-elapsed));
}
else { // Иначе анимацию пора завершать
e.style.cssText = originalStyle // Восстановить первонач. стиль
if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова
}
}
}
// Растворяет е от состояния полной непрозрачности до состояния полной прозрачности
// за указанное количество миллисекунд. Предполагается, что, когда вызывается
// эта функция, е полностью непрозрачен, oncomplete - необязательная функция,
// которая будет вызвана с элементом е в виде аргумента по завершении анимации.
// Если аргумент time не задан, устанавливается интервал 500 мсек.
// Эта функция не работает в IE, но ее можно модифицировать так, чтобы
// в дополнение к свойству opacity она использовала нестандартное
// свойство filter, реализованное в IE.
function fadeOut(e, oncomplete, time) {
if (typeof e === "string") e = document.getElementByld(e);
if (!time) time = 500;
// В качестве простой "функции перехода", чтобы сделать анимацию немного
// нелинейной, используется Math.sqrt: сначала растворение идет быстро,
// а затем несколько замедляется,
var ease = Math.sqrt;
var start = (new Date).getTime; // Запомнить момент начала анимации
animate; // И запустить анимацию
function animate {
var elapsed = (new Date).getTime-start; // Прошедшее время
var fraction = elapsed/time; // Доля от общего времени
if (fraction < 1) { // Если не пора завершать
var opacity = 1 - ease(fraction); // Вычислить непрозрачн.
e.style.opacity = String(opacity); // Установить ее в e
setTimeout(animate, // Запланировать очередной
Math.min(25, time-elapsed)); // кадр
}
else { // Иначе завершить
e.style.opacity = "0"; // Сделать е полностью прозрачным
if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова
}
}
}
Обе функции,
shake
и fadeOut,
принимают необязательную функцию обратного вызова во втором аргументе. Если эта функция указана, она будет вызвана по завершении воспроизведения анимационного эффекта. Элемент, к которому применялся анимационный эффект, будет передан функции обратного вызова в виде аргумента. Следующая разметка HTML создает кнопку, для которой после щелчка на ней воспроизводится эффект встряхивания, а затем эффект растворения:
<button onclick="shake(this, fadeOut);">Встряхнуть и pacтворить</button>
Обратите внимание, насколько функции
shake
и fade0ut
похожи друг на друга. Они обе могут служить шаблонами для реализации похожих анимационных эффектов с использованием CSS-свойств. Однако клиентские библиотеки, такие как jQuery, обычно поддерживают набор предопределенных визуальных эффектов, поэтому вам вообще может никогда не потребоваться писать собственные функции воспроизведения анимационных эффектов, такие как shake,
если только вам не понадобится создать какой-нибудь сложный визуальный эффект. Одной из первых и наиболее примечательных библиотек визуальных эффектов является библиотека Scriptaculous, которая предназначалась для работы в составе фреймворка Prototype. За дополнительной информацией обращайтесь по адресуи http://scripty2.com/.