[Урок 22] Первый сайт на Zero Block (4 часть - работаем с изображениями и анимацией)

Всем привет! Продолжаем большую работу над сайтом вебинары на Zero Block.
Сегодня приступим к работе с изображениями и немного углубимся в пошаговую анимацию. Урок важный, изучаем!)

Результат, который у нас есть на данный момент.

Добавляем изображения

Переходим к редактированию блока, нажимаем на добавление элемента и добавляем изображение (Add image).

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

Нажимаем "Upload image" и загружаем изображение "bank.png".

Внимание! Данное изображение векторное, его нужно заливать в формате .svg! Я заливаю png только в качестве урока.

Готово. У нас загрузилось изображение. Нажимаем на кнопку "Original size" - наше изображение растянется на максимально допустимый размер (на весь его размер). Сверху настроек выравниваем изображение по центру контейнера.

Смотрим макет и теперь выравниваем изображение по модульной сетке. У меня получилось +- так:

Добавляем монетки

Повторяем действия, добавляем изображение, загружаем файл "coin.png" и уменьшаем его. Помещаем его примерно так:

Размножаем монетки

Эх, работало бы это в жизни. Нажимаем ctrl+с чтобы скопировать монету - ctrl+v чтобы вставить. Либо нажимаем на монету, держим зажатым кнопку alt и тянем её в любую сторону. Таким образом нужно накопировать ещё 3 монеты.

Сделаю их разных размеров.

Приступаем к анимации монеток

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

Нажимаем на любую монету, открываем её настройки. В самом конце настроек жмём на ADD в графе STEP BY STEP ANIMATION.

EVENT: element on screen (это значит, что действие будет воспроизводиться просто когда объект есть на экране)

LOOP: LOOP (это значит, что анимация будет зациклена)

STEPS: нажимаем add step

Нажимаем на Step 1 и ниже ставим:

Duration: длительность анимации, сделаю 1,5

Move X/Y: перемещение изображение по осям. Нужно сделать перемещение по оси Y на -1000, чтобы монетка улетала наверх

Rotate: вращение в процессе анимации. Я сделаю 70.

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

Ещё раз нажимаем на монету и прячем её на задний план

Чтобы монетка не была поверх основного изображения, нужно убрать её на слой ниже. Нажимаем на монету и открываем её настройки.

В пункте настроек ARRANGE нажимаем на последнюю кнопку. Таким образом мы спрячем монету на самый задний план (подо все другие элементы на экране). Тут всё показано наглядно. Повторяем данный шаг со всеми монетами.

Сохраняем, закрываем и смотрим.

Монеты летят, сайт работает. Урок подходит к концу. Экспериментируйте друзья, всем больших успехов!)