July 28, 2020

[Урок 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 выставились сами собой.

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

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

Тестируем анимацию и сохраняем сайт.

Готово! Анимация получилась эффектной, но при этом достаточно простой. До связи!

Ваш, сайтодел :)