Современные информационные технологии. 4 курс. Лабораторное занятие №3. Display animation на основе keyframes

октября 24, 2020

Современные информационные технологии. 4 курс. Лабораторное занятие №3. Display animation на основе keyframes

Вам нужно создать сценарий экранной анимации с несколькими слоями графики (4-5) и двумя движущимися объектами.

Подготовительный этап:

1.Создайте пять слоев фона с прозрачной подложкой в формате .png таким образом, чтобы при наложении друг на друга они образовывали целостную картину. Все слои должны быть одинаковы по ширине, но различаться по высоте. Палитра слоев должна становиться более светлой по мере удаления от поверхности экрана. Загрузите все готовые объекты на sites.google.com.

Общая схема слоев и движущихся объектов из моего примера:

2. Создайте два движущихся объекта в виде статичных силуэтов с прозрачным фоном в формате .png. Объекты должны быть меньше слоев и соотноситься с ними так, чтобы выглядеть естественно. Загрузите оба объекта на sites.google.com.

Стили:

3. Укажите в общем селекторе, что объекты будут помещаться внутри блока:

* {

box-sizing: border-box;

}

4. Для основного содержимого укажите необходимый шрифт:

body {

font-family: '?', sans-serif;

}

5. Создайте общий класс сцены, в котором укажите ширину и высоту в 100%, минимальную высоту анимации на странице (атрибут min-height) - в моем примере 450рх, положение объекта (position) задайте относительным (relative), отступы сверху (top) и слева (left) нулевыми. Задайте фон, на котором будут расположены все слои анимации через атрибут background-color. Также в классе сцены необходимо указать атрибут отображения transform со значением translate3d(0, 0, 0);

6. Создайте классы для каждого слоя анимации. В каждом из них укажите следующие атрибуты:

animation: animation_fg linear 30s infinite both;

Длительность в секундах измените для каждого слоя. В моем примере она следующая: 30s, 55s, 75s, 95s, 120s. То есть чем дальше слой, тем медленнее он движется - также как в реальности: горизонт меняется медленнее, чем близко расположенные объекты.

background: url(?) 0 100% repeat-x;

В адресации укажите путь к соответствующему файлу слоя из sites.google.com

z-index: 1;

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

background-size: auto 145px;

Пиксели в размере фона должны совпадать с высотой вашего слоя и, соответственно, в каждом слое быть своими.

7. Создайте два разных класса для объектов, которые у вас будут двигаться по фону. Укажите в них следующие атрибуты:

background: url(?) 0 100% no-repeat;

z-index: 1;

position: absolute;

bottom: 100px;

left: 0;

width: 100%;

height: 100%;

background-size: auto 75px;

animation: animation_название класса вашего объекта linear 10s infinite both;

В адресации укажите ссылку на каждый из движущихся объектов в sites.google.com. Обратите внимание, что в атрибуте размера фона и анимации указаны расположение движущегося объекта и скорость этого объекта - вы можете их поменять, если требуется.

8. Чтобы создать эффект движения, аналогичный моему, продублируйте класс вашего второго движущегося объекта со следующими атрибутами:

animation: animation_название класса вашего объекта linear 15s infinite both;

9. Теперь вам нужно задать правило keyframes для слоев фона и для движущихся объектов. Для слоев я использую следующие значения:

@keyframes animation_fg {

0% {

background-position: 2765px 100%;

}

100% {

background-position: 550px 100%;

}

10. Для движущихся объектов такие:

@keyframes animation_название класса ваших движущихся объектов {

0% {

background-position: -300px 100%;

}

100% {

background-position: 2000px 100%;

}

HTML

11. Укажите стандартные данные и заголовок:

<!DOCTYPE html>

<head>

<title>Title</title>

12. Встройте стандартную библиотеку CSS. Взять ее можно здесь: https://sites.google.com/site/konoplevmedia/meyer-reset.css

13. Закройте </head>, внутри <body> разверните классы из CSS. Сначала класс вашей сцены, затем в него вложены классы слоев, начиная с последнего, а между ними, там, где нужно, классы ваших движущихся объектов. В моем примере объекты движутся между слоями 4 и 3.

Классы слоев задаются по типу:

Рекомендуется называть слои через тире с номером, для простоты создания анимации, тогда у вас будет условный слой-1, слой-2 и т.д. Не забывайте, что все названия - только латиницей! Таким же образом - через тире с цифрой следует назвать и движущиеся объекты.

Классы движущихся объектов задаются по типу:

14. Закройте оставшиеся теги.

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

Если все сделано верно, то ваша анимация будет выглядеть схожим образом:

Animation

Ссылки на выполненное задание принимаются в комментарии к данному посту до 15:00 3 ноября.