Анимация в Google Web Designer создается с помощью ключевых кадров, которые определяют начальные и конечные точки анимации. Вы устанавливаете параметры анимированного элемента для каждого ключевого кадра, а Google Web Designer добавляет переходы между ними.
Например:
- На первом ключевом кадре с левой стороны страницы расположен красный прямоугольник.
- На втором ключевом кадре, через две секунды, вы изменяете цвет прямоугольника и его расположение: теперь он синий и находится с правой стороны страницы.
Google Web Designer генерирует анимацию с постепенным изменением цвета через оттенки фиолетового и перемещением прямоугольника через страницу.
С помощью CSS можно анимировать уже существующие элементы HTML, но нельзя добавлять и удалять элементы. Вместо этого можно скрывать и отображать их, изменяя свойство "visibility
" нужного элемента.
Поскольку анимация создается с помощью CSS, вы можете создавать отдельные анимационные последовательности для областей просмотра разных размеров, используя инструменты адаптивного дизайна.
Режимы создания анимации
В Google Web Designer доступны два режима работы с анимацией: быстрый и расширенный. Между ними можно переключаться в любое время.
Быстрый режимАнимация строится по сценам. Вы добавляете новый вид всей страницы и меняете все элементы, которые нужно анимировать. На временной шкале последовательно отображаются значки каждой сцены, как в раскадровке. Подробнее… |
Расширенный режимКаждый элемент можно анимировать отдельно, создавая более сложные анимации. На временной шкале каждому элементу соответствует слой и размещены маркеры ключевых кадров в соответствующих точках. Подробнее… |
Ограничения для объявлений AMPHTML
В объявлениях AMPHTML можно анимировать только следующие свойства CSS:
transform
(позволяет перемещать, поворачивать, масштабировать и искажать элементы);opacity (прозрачность);
visibility (видимость).