[Урок 47] Анимация с самолётиками

Привет, сайтоделы! Ждал, когда опрос наберёт больше 1000 голосов, чтобы запилить этот урок. Да, я очень люблю цифры.

Почему-то большинство решило, что самолёты на фоне - это .gif изображение, вставленное на фон. Это не совсем так. Изучайте урок, расписал всё подробно!)

Блок выполнен в Zero Block.

Покажу, как он выглядит в редакторе. Возможно кто-то уже сейчас поймёт как это сделано.

Каждый самолётик - заанимированый объект. Анимация сделана в Step by step animation.

Как сделать?

Добавляем несколько подобных объектов. Вот например мой самолёт (можете скачать его от сюда):

Траектория полёта самолётиков - хаотична.

Открываем пошаговую анимацию для любого самолёта.

EVENT: element on screen - действие выполняется когда объект появляется на экране.

Loop: loop - зацикливаем анимацию. Это нужно, чтобы самолёты летали постоянно, а не просто пролетели из точки А в точку Б и остановились.

Эти настройки мы выставляем для ВСЕХ самолётов.

Добавляем первый шаг.

Тут нужно задать траекторию перемещения объекта.

Move X/Y: задаем координаты, куда должен прилететь самолёт.

Обратите внимание, что каждый самолёт должен начинать своё передвижение и заканчивать его ЗА пределами экрана. Смотрите скрин:

Можно просто добавить первый шаг и перетянуть самолёт в точку Б. В этом случае координаты добавятся сами.

Какие эффекты есть ещё?

Помимо простого перемещения я играл со скоростью полёта самолётов, их размерами и прозрачностью.

Duration: чем показатель меньше, тем скорость выше. И наоборот.

Opacity: показатель указывается в процентах. Процент прозрачности.

Scale: размер, так же устанавливается в процентах.

Как-то так. Придётся прорабатывать каждый элемент и задавать каждому самолёту свою анимацию. Но результат однозначно стоит работы)

Всем успехов!