Движущиеся рисунки

Анимация рисунков на JavaScript

Создал данную страницу для изучения кодов JavaScript, позволяющих заставить рисунки в форматах, не поддерживающих простую (GIF) анимацию, двигаться.

Для испытаний использовал несколько подходящих, интересных кодов, найденных мною в интернете, и несколько простых изображений, которые перевёл в формат PNG.

Кстати! Для анимации рисунков на JavaScript не имеет значения, какой формат они будут иметь.

Сначала показываю результаты испытаний, т.е. примеры такой анимации, а потом уже объясняю, как удалось заставить рисунки двигаться и, как настроить их код движения.

Примеры движущихся рисунков

Для просмотра эффекта движения рисунков, кликните по любому из представленных ниже. Можно по всем сразу и в любое время.
Каждый "клик" будет возвращать изображение машинки в исходное положение, и она станет двигаться по-новой. Забавно получается! Что-то вроде "автогонок".

** Чтобы вернуть рисунки в исходное (неподвижное) состояние, страницу нужно перезагрузить.

**Примечание.

Мне больше нравятся более простые скрипты, и поэтому под этой строчкой я сохранил более сложный код (*закомментировал) для 1-ого рисунка чёрно-белой машинки. Он полностью рабочий, хорошо сочетается с кодами цветных машинок, и очень подробно прокомментирован. НО! Если его запустить, перестанет работать самый интересный, пожалуй, но и самый сложный код четвёртого примера движения.

Четвёртый пример движущегося рисунка

Вовсе не случайно назвал этот пример работы JavaScript-кода самым интересным и сложным. Я составил его из 3-ёх самостоятельных скриптов, которые объединил в одном тэге таким вот образом: <script>Скрипт №1 Скрипт №2 Скрипт №3</script>.

Первая часть кода только лишь сдвигает рисунок мяча с лева на право, но 1 раз, при загрузке или перезагрузке страницы. И управлять им нельзя. А вот следующие коды уже гораздо более интересные.
Они позволяют "играть с мячом", кликая по нему.

** Чтобы просмотреть весь пример движения рисунка заново, страницу нужно перезагрузить.

Надеюсь, показанные примеры движущихся рисунков, Вам понравились. Ну, а теперь самое главное!

Как сделать рисунок движущимся

Движение, т.е. анимация, с точки зрения JavaScript - это постепенные изменения в так называемом "DOM-дереве" (объектной модели документа), с которой он и работает, внося в модель прописанные в его коде "новшества" для элементов этого "дерева": изменение координат расположения, размеров, цвета, и так далее.

Поэтому, чтобы заставить рисунок двигаться, сначала нужно прописать его в HTML-коде страницы, присвоив ему идентификатор.

После обязательно(!) прописать этот же идентификатор в таблице стилей CSS, указав тип его позиционирования (position). У меня движущихся рисунков несколько, поэтому я их там все перечислил. Это важно(!), иначе скрипты работать не будут!

В данном случае - прописал крохотную табличку стилей в конце тэга <head>.

И, наконец, добавил в HTML-код страницы подходящие js-скрипты, которые, оказывая воздействие через "DOM-дерево" на браузер пользователя, собственно, и делают любой рисунок движущимся.

Всё. Готово! Изображения двигаются, как им "велят" скрипты.

Кстати! Все использованные javascript-коды подробно прокомментировал.

Не стал выводить их на экран. Желающим скачать коды движущихся рисунков, будет достаточно открыть исходный код этой веб-страницы моего сайта.

А я дальше расскажу немного о некоторых наблюдениях, сделанных во время изучения и тестирования основных параметров использованных js-кодов движения.

Основные параметры скриптов

При изучении и тестировании применённых скриптов, разбирался с несколькими интересными функциями и методами, о которых и рассказываю в этом подразделе.

var start = Date.now(); – глобальная переменная, запускающая анимацию сразу при загрузке страницы.

name.onclick = function(){ – переменная, запускающая функцию движения, но НЕ сразу, а только по клику.

duration – устанавливает длительность движения в миллисекундах.
Если поставить этот параметр в значение 3000, то объект анимации уедет дальше. А если задать 5000, то он вообще уедет с сайта, и сильно увеличится нижний скролл.
Кстати! Сайт он при этом не растягивает (у меня жёсткая вёрстка), но становится виден справа большой кусок серого фона тэга <body>.

draw – метод, с помощью которого отрисовывается каждый этап состояния рисунка.

draw(progress); - функция, получающая состояние движения, и рисующая его. Так, скажем, значению progress = 0 соответствует его начальная точка, а progress = 1, соответственно, конечная.
Именно эта функция осуществляет движение вверх/вниз 4-ого рисунка (мяча).

time или timer или timing – используются в разных выражениях скриптов, т.е. там, где что-либо связано с временем движения рисунков.

timePassed - метод для вычисления и установки счётчика времени движения.

setTimeout - метод, запускающий функцию, но лишь однократно (здесь, то есть в этих скриптах, такой метод не используется).

setInterval - метод, имеющий такое же назначение и такой же синтаксис, как и выше упомянутый setTimeout, только он запускает выполнение функции НЕ один раз, а регулярно повторяет её через прописанный в коде интервал времени.

clearInterval(timer); – метод, позволяющий остановить выполнение скриптов движения.

timePassed / 5 + 'px'; - выражение, контролирующее как далеко(?) продвинется рисунок. Чем меньше цифра, тем дальше "уедет".
К примеру, поставив 1, он "уезжает" далеко за пределы сайта. Его действие аналогично duration (сказал о нём в начале подраздела). вспомнить:

ball.style.top = progress * 200 + 'px'; - это выражение указывает рисунку мяча куда(?), и как далеко(?) нужно двигаться.
Поставив в него 500, мяч будет очень далеко "упрыгивать". Если вставить в него bottom вместо top (как есть сейчас), то мяч будет прыгать вверх.

* * *

Думаю, вполне достаточно рассказал об основных параметрах и их настройке, использованных здесь скриптов движения.

Послесловие о движущихся рисунках

Конечно, показанные примеры создания движущихся рисунков с помощью JavaScript интересны, но есть и другие способы заставить рисунки двигаться.

И об одном из таких способов, на мой взгляд не менее интересном(!), подробно, с примерами, узнаете здесь: "SVG-анимация" (откроется в новом окне).

Ну, а самый простой способ создания движущихся рисунков - только с помощью HTML(!) - найдёте в подразделе "Движущийся рекламный текст-рисунок" страницы "Текстовые эффекты" (откроется в новом окне).

* * *

Посмотреть другие интересные примеры анимации рисунков сможете, вернувшись в общий раздел "JavaScript", кликнув по нижней синей навигационной стрелке.

ВВЕРХ