Анимация является широко используемым эффектом, и поэтому большинство библиотек JavaScript имеют для нее некоторую поддержку, включая встроенную поддержку для широко распространенной анимации. Например, jQuery (http://jquery.com/) имеет встроенную поддержку для анимации, делающей элемент прозрачным:
$("#myelement").fadeOut();
и функцию animate() для более сложной специальной работы:
$("#block").animate({
width: "70%",
}, 1500 );
Это вполне интуитивно понятно - берется элемент и изменяется атрибут CSS width, в течение 1500 миллисекунд, из исходного текущего состояния до 70% - функция animate описана здесь (http://docs.jquery.com/Effects).
Среда разработки Prototype's scriptaculous (http://script.aculo.us/) предлагает аналогичные средства, такие как Effect.Fade('id_of_element'), и много, много других. Библиотека Yahoo UI (http://developer.yahoo.com/yui/3/animation/) также может создавать аналогичные эффекты:
new Y.Anim({ node: '#demo', to: { width: 70%, }}).run();
Если вы уже использовали в своем коде библиотеки JavaScript, то знаете, что они предлагают значительно более простые средства анимации, чем самостоятельное управление анимацией с помощью setInterval. Однако, я думаю, что важно понимать, что происходит в реальности - это значительно улучшает навыки создания сценариев в долгосрочной перспективе.
Именно поэтому мы рассмотрели пример, начиная с самых первых принципов, прежде чем обращаться к библиотекам.
Дополнительные ресурсы об использовании различных библиотек JavaScript можно найти на сайте dev.opera.com (http://dev.opera.com/articles/view/introduction-to-javascript-toolkits/).
Хотя метод угасания желтого цвета демонстрирует анимацию, он несколько скучен. Когда большинство людей представляют себе анимацию, они обычно имеют в виду движение. Интересный прием предупреждения пользователя о том, что что-то произошло, не прерывая его рабочего процесса, состоит в немодальном сообщении. Вместо вывода диалогового окна alert(), которое требует от пользователя щелчка на OK, прежде чем он сможет продолжить, поместите сообщение просто в плавающий div на странице, который ненавязчиво остается там, пока не получит подтверждение. Второй достаточно интересной вещью затем может быть предоставление пользователю возможности вернуться к сообщению, для которого он подтвердил желание прочитать его еще раз. Поэтому давайте реализуем плавающее сообщение, которое, после щелчка на нем, "схлопывается" в угол экрана, и затем по щелчку может быть снова восстановлено. Вы можете посмотреть небольшую демонстрацию такого "схлопывающегося сообщения" (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html), чтобы понять общую идею.
Если вы делаете какую-то серьезную анимационную работу, или какую-то серьезную работу с JavaScript, почти всегда стоит использовать библиотеку JavaScript. Это позволит создать требуемое представление для пользователей, не беспокоясь о математических тонкостях, требуемых для выполнения анимации. (Познакомившись с представленным выше первым примером, вы знаете теперь, как выполнить математические вычисления и как использовать setInterval, но вы сохраните время и собственные силы, используя готовые решения.)
Приведенный выше демонстрационный пример использует для работы библиотеку jQuery (http://jquery.com/), но как упоминалось, большинство библиотек предоставляют достаточно похожую концепцию анимации, и поэтому вы сможете реализовать принципиальную часть, используя предпочитаемую библиотеку. По существу, необходимо сделать следующее:
Показать плавающее сообщение в центре экрана
Когда на нем производится щелчок:
Переместить его горизонтальную позицию в крайнее правое положение
Переместить его вертикальную позицию вверх
Задать его ширину равной 20px
Задать его высоту равной 20px
Сделать его плотность равной 20%, так что оно становится почти прозрачно и скрыть в нем текст
Когда выполняется щелчок на этой "мини"-версии сообщения, восстановить его в центре экрана (т.е., обратное тому, что мы делали для его сжатия) и чтобы пользователь получил четкую картину того, что произошло с его сообщением, переход от полноразмерного сообщения к мини-сообщению должен быть анимирован (чтобы они видели, что сообщение "сжалось" в угол окна).
Выполнить анимацию с помощью jQuery очень легко: используйте просто функцию .animate() и предоставьте желательный конечный результат анимации (и как долго она должна выполняться):
$(ourObject).animate({
width: "20px", height: "20px", top: "20px",
right: "20px", marginRight: "0px", opacity: "0.2"
}, 300);
функция получает ourObject и, за 300 миллисекунд, заменяет его ширину и высоту на 20px, его верхнюю и правую позиции на 20px, его свойство стиля margin-right на 0px, и его плотность (в браузерах, которые поддерживают плотность изображения) на 20%. Затем это просто вопрос программирования в стиле jQuery, чтобы получить требуемую анимацию, когда происходит щелчок на сообщении:
$(ourObject.click, function(){
$(this).animate({
width: "20px", height: "20px", top: "20px",
right: "20px", marginRight: "0px", opacity: "0.2"
}, 300)
});
Для восстановления сообщения, когда на нем снова происходит щелчок, потребуется просто еще один вызов .animate():
и с небольшой логикой, определяющей, будет ли сообщение в данный момент показано или сжато (чтобы знать, какая анимация выполняется), и небольшим кодом CSS для описания начального стиля сообщения (большое, зеленое, центрировано по горизонтали), имеем все, что требуется. Не более тридцати строк кода. Именно поэтому библиотеки являются хорошей идеей!
