[Урок 50] Анимация: передвижение объектов
Всем привет! Я очень люблю смотреть работы в разделе "madeontilda". Наткнулся я на сайт с простой, но очень интересной анимацией перемещения объектов.
Анимация достаточно простая, но показать её я просто обязан. Изучаем!)
Из чего состоит анимация?
Перемещение паллета по конвейеру. При этом сам конвейер стоит на месте и ездит только один объект.
Все материалы и идею анимашки я взял на этом сайте: http://readyrobot.ru
Для выполнения подобной анимации нам нужны будут два объекта (фон и сам объект). Я загрузил их на облако: https://cloud.mail.ru/public/22Ux/3qMs8RmtQ
Переходим к Zero Block
Добавляем наши объекты. Нажимаем на крестик в левом верхнем углу и жмём "Add image". Добавляем два объекта, в которые мы будем грузить наши изображения.
Открываем настройки этого изображения и загружаем сначала фон, а потом и саму коробку.
Обратите внимание, что изображения должны быть пропорциональны друг другу!
Помещаем объекты
Фон нужно убрать так, чтобы лента уходила за window container.
А коробки мы помещаем на стартовую позицию, на сам конвейер. Выглядит это примерно так:
Добавляем анимацию
Всё готово, осталось заанимировать движение коробок по ленте конвейера. Для этого открываем Steb by step animation.
Event: element on screen
Loop: loop (зациклившем анимацию)
Добавляем первый шаг.
Вся анимация будет проходить в два шага. Коробки будут приезжать в угол и уезжать за пределы окна монитора.
В первом шаге нас интересует настройка MOVE X/Y (перемещение по осям).
Просто берём коробку и тащим её к месту, где она должна оказаться в конце первого шага.
Готово. Координаты MOVE X/Y выставились сами собой.
Добавляем второй шаг.
Теперь нам нужно отправить коробки за пределы монитора. Добавляем второй шаг и перетаскиваем их в подобную точку:
Тестируем анимацию и сохраняем сайт.
Готово! Анимация получилась эффектной, но при этом достаточно простой. До связи!
Ваш, сайтодел :)