-
Меня зовут Лукас.
-
Я специалист по Google Web Designer.
-
Продолжаем тему
создания адаптивных документов
-
с помощью правил обработки мультимедиа.
-
Сегодня мы поговорим
о применении этих правил к анимации.
-
Для начала
возьмем простой документ.
-
У него вертикальный формат
при узкой области просмотра
-
и горизонтальный – при широкой.
-
Растянем этот документ так, чтобы
-
при вертикальном формате и достаточной высоте
-
в нем было не одно изображение, а два.
-
При этом одна картинка наложена на другую.
-
Создадим анимированный переход между ними.
-
Анимация в Google Web Designer основана
-
на ключевых кадрах CCS3,
поэтому для ее создания
-
можно применять
правила обработки мультимедиа.
-
Вернемся к главным правилам.
-
Создадим копию этого изображения.
-
На новом изображении укажем на другой ресурс,
-
изменив путь к этому ресурсу.
-
Второе изображение будет по умолчанию скрыто.
-
Вернемся к правилам обработки мультимедиа
-
и добавим точку прерывания по высоте.
-
Мы работаем с более крупным диапазоном высот.
-
Добавим по ключевому кадру
-
для каждого изображения.
-
Затем расположим одно изображение над другим
с помощью инструмента "Преобразовать".
-
Вот так.
-
Кроме того, снова сделаем
второе изображение видимым.
-
-
Проверим анимацию с помощью временной шкалы.
-
Эта анимация считается адаптивной,
-
так как оба изображения
остаются на своих местах,
-
даже если меняется размер области просмотра.
-
Если перейти от этого правила
обработки мультимедиа к другому,
-
анимация перестанет работать.
-
Это отражено и на временной шкале.
-
На ней содержатся данные
только по правилу обработки мультимедиа
-
в правом нижнем углу.
-
А теперь настроим анимацию по умолчанию,
-
чтобы прозрачность менялась от 0 до 1.
-
Для этого добавим ключевой кадр
-
в разделе "Главные правила".
-
Для базового
уровня прозрачности зададим ноль,
-
а для ключевого кадра – единицу.
-
Прозрачность изображения
в главных правилах меняется.
-
Вернувшись к правилам обработки мультимедиа,
-
мы видим, что анимация работает
-
аналогичным образом для каждого из них.
-
Вот первое правило,
-
второе
-
и третье.
-
Эту анимацию не поддерживает
только правило в правом нижнем углу,
-
так как его настройки
переопределяют любые другие.
-
Здесь требуется лишь одна поправка.
-
Ранее для первого изображения мы задали
-
базовый уровень прозрачности, равный нулю.
-
Сейчас этот уровень надо изменить на единицу.
-
Анимация снова работает.
-
Анимацию, переопределившую
правило обработки мультимедиа,
-
легко отличить от других.
-
Ее название выделено на временной шкале.
-
Если нажать на название, появится окно,
-
позволяющее отключить переопределение
-
и перейти к базовому варианту анимации.
-
Это все, что я хотел рассказать о применении
-
правил обработки мультимедиа к анимации.
-
Спасибо за внимание.
