Компонент "Эффект изображения"

Этот компонент не поддерживается в объявлениях AMPHTML, видеорекламе и графических объявлениях.

Компонент "Эффект изображения" позволяет применять к изображению (а иногда и к паре изображений) множество визуальных эффектов, основанных на JavaScript: До и после, Дыхание, Появление и Волна.

Image Effect component - Google Web Designer

Использование компонента "Эффект изображения"

1. Откройте панель Компоненты, а затем папку Графика и эффекты.

2. Дважды нажмите на компонент Эффект изображения или перетащите его в рабочую область.

3. Дважды нажмите на компонент в рабочей области или используйте кнопку Настройки на панели Свойства. Откроется диалоговое окно "Эффект изображения".

4. Перетащите изображение в рабочую область диалогового окна или нажмите Выбрать изображения, чтобы задать изображение.

5. Выберите нужный тип эффекта изображения из раскрывающегося списка на панели Свойства.

6. Для некоторых эффектов нужно два изображения. Вы можете выбрать дополнительное изображение из библиотеки объектов или загрузить его с компьютера.

7. Настройте описанные ниже свойства эффекта.

Свойства

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

Свойства компонента "Эффект изображения"

Свойство	Описание
Имя	Задает название компонента "Эффект изображения".
Масштаб	Определяет адаптацию размеров изображений в компоненте. Подробнее… Вписать Кадрировать Нет Растянуть и заполнить
Задать ограничение по продолжительности анимации	Если этот флажок установлен, автоматическое воспроизведение анимации прекращается по истечении заданного времени в секундах.

Свойства для отдельных типов эффектов

Свойства каждого типа эффекта можно просмотреть в диалоговом окне "Эффект изображения". Дважды нажмите на компонент "Эффект изображения" в рабочей области или нажмите кнопку Настройки… на панели "Свойства". Откроется диалоговое окно "Эффект изображения". Затем выберите эффект, чтобы просмотреть его свойства.

Нет

К изображению не применяются эффекты.

До и после

Эффект "До и после" применяет переход "Стирание" между двумя изображениями. По завершении переход изменяет направление, а затем повторяется.

  

Свойство	Описание
Изображения
Основное	Изображение, которое показывается сверху или слева от разделителя. Основное и появляющееся изображения можно поменять местами с помощью кнопки Заменить изображения .
Появляющееся	Изображение, которое показывается снизу или справа от разделителя. Появляющееся и основное изображения можно поменять местами с помощью кнопки Заменить изображения .
Разделитель
Угол	Угол разделительной линии между двумя изображениями в градусах от 0 до 180. Значение по умолчанию – 90 градусов (вертикальная линия).
Размывка	Размытие краев изображения вдоль разделителя. Значение 1 соответствует резкому переходу, а большие значения – размытому.
Взаимодействие	Если установлен флажок Следовать за мышью, разделитель следует за курсором.
Анимация
Автозапуск	Если установлен флажок Автозапуск, анимация запускается автоматически при загрузке компонента.
Начальное состояние
Положение	Начальное положение разделителя при запуске анимации.
Задержка	Время перед автозапуском анимации в секундах.

Дыхание

Эффект "Дыхание" гибко расширяет и сокращает изображение.

   

Свойство	Описание
Изображения
Основное	Изображение, к которому необходимо применить эффект.
Дыхание
Скорость	Скорость анимации. Значение 0 отключает анимацию, а большие значения ускоряют ее воспроизведение.
Горизонтальный эффект
Расширение	Степень расширения изображения по горизонтали.
Сокращение	Степень сокращения изображения по горизонтали.
Вертикальный эффект
Расширение	Степень расширения изображения по вертикали.
Сокращение	Степень сокращения изображения по вертикали.
Время ожидания
Расширение	Время, на протяжении которого изображение остается полностью расширенным, в секундах.
Сокращение	Время, на протяжении которого изображение остается полностью сокращенным, в секундах.
Кривые
По горизонтали	Количество кривых, создаваемых искажением по горизонтали.
По вертикали	Количество кривых, создаваемых искажением по вертикали.

Появление

Эффект "Появление" показывает соответствующую часть второго изображения в круглой зоне фокуса.

  

Свойство	Описание
Изображения
Основное	Изображение, которое показывается вне зоны фокуса. Основное и появляющееся изображения можно поменять местами с помощью кнопки Заменить изображения .
Появляющееся	Изображение, которое показывается в зоне фокуса. Появляющееся и основное изображения можно поменять местами с помощью кнопки Заменить изображения .
Фокус
Радиус	Радиус зоны фокуса по осям X и Y. Нажмите кнопку Закрепить соотношение радиусов , чтобы зафиксировать соотношение между радиусами при их изменении.
Размывка	Размытие краев зоны фокуса. Значение 0 соответствует резкой границе, а большие значения размывают ее.
Эффект	Если установлен флажок Оставаться видимым, появляющееся изображение остается видимым после перемещения зоны фокуса.
Анимация
Автозапуск	Тип перемещения зоны фокуса. Блуждающий (по умолчанию). Зона фокуса перемещается по изображению случайным образом, изменяя направление, чтобы оставаться в пределах изображения. Блуждающий оборачивающийся. Зона фокуса перемещается по изображению случайным образом, возникая с противоположной стороны при достижении его края. Круговой. Зона фокуса перемещается по кругу. Нет
Скорость	Скорость перемещения зоны фокуса. Значение 0 отключает анимацию, а большие значения ускоряют ее воспроизведение.
Взаимодействие	Если установлен флажок Следовать за мышью, зона фокуса следует за курсором.

Волна

Эффект "Волна" анимирует части изображения в форме волны.

   

Свойство	Описание
Изображения
Основное	Изображение, к которому необходимо применить эффект.
Волна
Тип	Форма волны, используемая для эффекта. Стандартная. На изображении возникает рябь. Линзирующая. Изображение сокращается и расширяется с эффектом симметричной волны.
Ориентация	Направление анимации волны. Горизонтальная Вертикальная
Скорость	Скорость анимации волны. Значение 0 отключает анимацию, а большие значения ускоряют ее воспроизведение.
Магнитуда	Размер волн. Значение 0 отключает эффект, а большие значения увеличивают волны.
Длина	Расстояние между пиками волн. Чем меньше расстояние, тем больше волн на изображении.
В обратную сторону	Если установлен флажок В обратную сторону, волны двигаются слева направо (в горизонтальной ориентации) или снизу вверх (в вертикальной ориентации).
Обрезка	Если установлен флажок Обрезка, изображение перерисовывается в каждом кадре анимации, не оставляя следа.
Дополнительные
Область волны	Часть изображения, на которую распространяется эффект волны.
Самое сильное колебание волны	Часть изображения с самым сильным колебанием волны. Интенсивность эффекта уменьшается в других частях изображения.

События и действия

События, отправляемые компонентом "Эффект изображения"

Перечисленные ниже события компонента "Эффект изображения" могут инициировать другие действия.

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

Действия, выполняемые компонентом "Эффект изображения" и каждым из его эффектов

Перечисленные ниже действия в компоненте "Эффект изображения" могут инициироваться другими событиями.

• Воспроизвести
• Пауза

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

Подробнее о том, как настраивать события…

Предпросмотр

Когда вы работаете в диалоговом окне "Эффект изображения", в рабочей области можно увидеть, как выглядит анимированный компонент. При изменении каких-либо свойств анимация запускается сначала.

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