Проектирование и дизайн ИС Практическая работа №17

Практическое занятие №17

Тема: Создание простой динамической CSS-анимации

Цель работы: создать интерактивную web-страницу сCSS-анимацией

Приобретаемые умения и навыки: Умение работать с СSS, создание css-анимации

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

План работы

1. Создать CSS-анимацию в виде движущих по кругу четырех квадратов

2. Квадраты должны двигаться против часовой стрелки по кругу собираясь в один квадрат и раздвигаясь в разные стороны

3. Цвет каждого квадрата при движении будет меняться

Шаг 1

Создайте скелет HTML – документа и подключенный к нему СSS файл.

Чтобы добавить стиль CSS в часть запишем команду для подключения CSS стиля и создадим css-файл с названием style.css

Шаг 2

В HTML-файле создайте блог-контейнер с помощью тегакоторый используется для группировки блочных элементов и придания им стилей и элемента classкоторый определяет имя класса для элемента зададим класс divclass="loader"в который поместим 4 строковых контейнеракоторые помогут нам создать квадраты для нашей анимации.

Шаг 3

Теперь перейдем к нашему СSS-файлу. Для начала мы подготовим наш CSS-файл. Первое что мы сделаем это мы установим настройки расположения нашей будущей анимации.

Добавим следующую команду:

С помощью box-sizingи свойства border-boxмы зададим границы для нашей анимации, в нашем случае наша анимация будет располагаться по центру, для этого для наших объектов мы укажем следующие настройки

Все выше приведенные свойства позволят нам расположить нашу бедующую анимацию по центру и избавиться от эффекта движения ее по экрану монитора, так как это нас не устраивает

Шаг 4 Создание квадрата

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

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

Итак, чтобы поместить наш квадрат в центр мы отдельно для блочного элемента с классом loaderзададим свои настройки:

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

Шаг 5 Создание правил и анимации

Ключевые кадры используются для указания значений свойств анимации в различных точках анимации. Ключевые кадры определяют поведение одного цикла анимации; анимация может повторяться ноль или более раз.

Ключевые кадры указываются с помощью правила @keyframes, определяемого следующим образом:

@keyframes имя анимации{ список правил }

CSS

Создание анимации начинается с установки ключевых кадров правила @keyframes. Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления.

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов. В данном случае мы будем использовать процентное соотношение.

Первое правило заставит наш квадрат поворачиваться против часовой стрелки. Чтобы добиться эффекта вращения нам нужно использовать уже изученное нами свойство transformcфункцией rotate. Мы зададим 3 кадра с разными углами поворота, это будут углы 45 градусов, 135 градусов и 225 градусов, но чтобы наш квадрат поворачивался против часовой стрелки градусы будут иметь отрицательные значения

Для лучшего удобства расположим все наши правила после настроек body

Откройте браузер и посмотрите что получилось, наш квадрат должен поворачиваться против часовой стрелки.

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

С помощью @keyframesмы создадим правила, а с помощью нам известного свойства transformc функцией translateмы будем задавать направление каждому квадрату по осям Xи Y(по необходимости), также мы зададим для каждого квадрата свой цвет, чтобы наша анимация смотрелась эффектнее

Подключение анимации

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

Для удобства этот код мы запишем в конце чтобы не запутаться в нашем общем коде

Посмотрите на результат, один из четырех квадратов движется как надо!

Теперь по аналогии вам надо прописать правила для остальных трех квадратов и подключить к ним анимацию как вы это делали для первого квадрата.

Название правил будут следующие:

@keyframesspan-2, @keyframesspan-3, @keyframesspan-4

!!!При создании правил обращайте внимание на направление координат осей X и Y

Контрольные вопросы:

1. Какие два основных компонента нужны для создания CSS анимации?

2. Что делает @keyframes?