Компонент "Галерея переходов"

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

Компонент "Галерея переходов" позволяет показывать изображения последовательно и добавлять анимированные переходы между ними.

Как выбрать галерею

В Google Web Designer есть четыре компонента с галереями:

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

Использование компонента "Галерея переходов"

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

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

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

4. На панели Библиотека слева находятся изображения, которые можно добавить в галерею. Для этого нажмите кнопку Импорт объектов в нижней части панели или перетащите изображения из другого окна.

5. Перетащите изображения, которые нужно добавить в галерею, в рабочую область или на панель Кадры в нижней части диалогового окна. Можно выбрать несколько изображений из Библиотеки, а затем нажать на них правой кнопкой мыши и выбрать Добавить.

6. Выберите тип перехода на панели Переход.

7. Настройте продолжительность перехода, динамику и другие описанные ниже свойства.

Изменение порядка изображений в галерее

1. Дважды нажмите на компонент в рабочей области или используйте кнопку Настройки на панели Свойства. Откроется диалоговое окно "Галерея переходов".
2. Перетащите изображение на новое место на панели Кадры в нижней части окна.

Удаление изображений из галереи

1. Дважды нажмите на компонент в рабочей области или используйте кнопку Настройки на панели Свойства. Откроется диалоговое окно "Галерея переходов".
2. Выберите изображения, которые нужно удалить, на панели Кадры в нижней части окна.
3. Воспользуйтесь клавишей Delete или нажмите правой кнопкой мыши на выбранные элементы и в контекстном меню выберите Удалить.

Замена изображений в галерее

1. Дважды нажмите на компонент в рабочей области или используйте кнопку Настройки на панели Свойства. Откроется диалоговое окно "Галерея переходов".
2. Нажмите правой кнопкой мыши на изображение на панели Кадры и в контекстном меню выберите Заменить изображение.

Свойства

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

Типы переходов

Доступный набор свойств зависит от типа перехода.

Нет

Между кадрами нет визуального эффекта перехода.

Затемнение

Новое изображение заменяет собой старое с эффектом затемнения.

Свойство	Описание
Продолжительность	Продолжительность смены изображения в секундах. Значение по умолчанию – 1.
Динамика	Динамика анимации перехода: Линейная (по умолчанию) Ускорение Замедление Ускорение и замедление

Смещение

Новое изображение сдвигает старое за кадр.

Свойство	Описание
Стиль	Обычное	Разделение
Продолжительность	Продолжительность смены изображения в секундах. Значение по умолчанию – 1.
Динамика	Динамика анимации перехода: Линейная (по умолчанию) Ускорение Замедление Ускорение и замедление
Направление (доступно, если выбран стиль Обычное)	Направление эффекта. Слева направо (по умолчанию) Справа налево Сверху вниз Снизу вверх
Ориентация (доступно, если выбран стиль Разделение)	Ориентация анимации. Горизонтальная Вертикальная (по умолчанию)

 

Стирание

Новое изображение заменяет старое вдоль движущихся линий.

Свойство	Описание
Стиль	Обычное	Дверь	Диафрагма
	Радиальное	Полосы
Продолжительность	Продолжительность смены изображения в секундах. Значение по умолчанию – 1.
Динамика	Динамика анимации перехода: Линейная (по умолчанию) Ускорение Замедление Ускорение и замедление
Направление (доступно, если выбран стиль Обычное, Полосы, Дверь или Радиальное)	Направление эффекта. Доступные варианты зависят от стиля. Обычное или Полосы: Слева направо (по умолчанию) Справа налево Сверху вниз Снизу вверх Дверь: От центра (по умолчанию) К центру Радиальное: По часовой стрелке (по умолчанию) Против часовой стрелки
Угол (доступно, если выбран стиль Обычное)	Угол линии стирания в градусах от –89 до 89.
Ориентация (доступно, если выбран стиль Дверь)	Ориентация анимации. Горизонтальная Вертикальная (по умолчанию)
Раскрытие (доступно, если выбран стиль Диафрагма или Радиальное)	Раскрытие диафрагмы по осях X и Y или радиус раскрытия в процентах от кадра галереи.
Полосы (доступно, если выбран стиль Полосы)	Количество полос каждого цвета от 1 до 10. Значение по умолчанию – 2.
Цвет (доступно, если выбран стиль Полосы)	Цвет каждой полосы.

 

Секторы

Новое изображение появляется в виде секторов или столбцов, которые возникают в кадре друг за другом.

Свойство	Описание
Продолжительность	Продолжительность смены изображения в секундах. Значение по умолчанию – 1.
Динамика	Динамика анимации перехода: Линейная (по умолчанию) Ускорение Замедление Ускорение и замедление
Направление	Направление эффекта. Слева направо (по умолчанию) Справа налево Сверху вниз Снизу вверх
Секторы	Количество секторов от 1 до 20. Значение по умолчанию – 5.
Добавлять прозрачный фон	Если этот флажок установлен, до перехода к новому изображению отображается прозрачный фон.

Жалюзи

Новое изображение появляется будто из-за жалюзи.

Свойство	Описание
Стиль	Обычное	Венецианские
Продолжительность	Продолжительность смены изображения в секундах. Значение по умолчанию – 1.
Динамика	Динамика анимации перехода: Линейная (по умолчанию) Ускорение Замедление Ускорение и замедление
Направление (доступно, если выбран стиль Обычное)	Направление эффекта. Слева направо (по умолчанию) Справа налево Сверху вниз Снизу вверх
Ориентация (доступно, если выбран стиль Венецианские)	Ориентация анимации. Горизонтальная Вертикальная (по умолчанию)
Жалюзи	Количество жалюзи от 1 до 20. Значение по умолчанию – 5.
Добавлять прозрачный фон (доступно, если выбран стиль Обычное)	Если этот флажок установлен, до перехода к новому изображению отображается прозрачный фон.
С задержкой (доступно, если выбран стиль Венецианские)	Если этот флажок установлен, жалюзи переходят постепенно друг за другом, а не одновременно.

Поворот

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

Свойство	Описание
Продолжительность	Продолжительность смены изображения в секундах. Значение по умолчанию – 1.
Динамика	Динамика анимации перехода: Линейная (по умолчанию) Ускорение Замедление Ускорение и замедление
Направление	Направление эффекта. По часовой стрелке (по умолчанию) Против часовой стрелки

Зигзаг

Новое изображение постепенно появляется, повторяя движения змейки.

Свойство	Описание
Продолжительность	Продолжительность смены изображения в секундах. Значение по умолчанию – 1.
Динамика	Динамика анимации перехода: Линейная (по умолчанию) Ускорение Замедление Ускорение и замедление
Ориентация	Ориентация анимации. Горизонтальная (по умолчанию) Вертикальная
Строки	Количество строк от 1 до 20. Значение по умолчанию – 5.
Столбцы	Количество столбцов от 1 до 20. Значение по умолчанию – 5.

Свойства галереи переходов

Свойство	Описание
Название	Название компонента галереи переходов.
Изображения	Изображения, которые отображаются в галерее. Их можно изменить на панели Кадры в диалоговом окне галереи переходов. Можно связать с динамическими данными.
Масштаб	Определяет адаптацию размеров изображений в пределах фиксированного размера кадра. Подробнее… Вписать Кадрировать Нет Растянуть и заполнить
Начальный кадр	Определяет, какой кадр отображается сначала (где 1 обозначает первый кадр).
Автозапуск
Автозапуск	Если этот флажок установлен, кадры галереи перелистываются автоматически. Когда включена эта опция, на панели Кадры отображается общее время перелистывания галереи.
Шаг	Продолжительность отображения каждого кадра в секундах. Применяется, только если установлен флажок Автозапуск.
Повторить	Количество раз, которое будут перелистываться кадры галереи, где 0 обозначает бесконечный повтор. Применяется, только если установлен флажок Автозапуск.
Взаимодействие
Цикличная навигация	Если этот флажок установлен, можно переходить с последнего кадра на первый.
Жест	Определяет жест пользователя, который изменяет текущий кадр в галерее. Нет Клик (по умолчанию) Перелистывание (доступно только для некоторых типов переходов*) Кроме выбранного жеста можно также использовать маркеры навигации (если вы их включите) или специальные элементы навигации, установленные с помощью событий.
Игнорировать перелистывание в обратную сторону	Если этот флажок установлен, компонент не реагирует на жесты перелистывания в противоположном от эффекта анимации направлении и пользователь не может перейти к предыдущему кадру. Применяется, только если свойство Жест имеет значение Перелистывание и не установлен флажок Включить интерактивный переход.
Включить интерактивный переход	Если этот флажок установлен, анимация перехода следует за указателем пользователя. Доступно, только если для свойства Жест можно установить значение Перелистывание*.
Навигация
Включить	Если этот флажок установлен, в галерее отображаются навигационные маркеры.
Уменьшенные изображения	Если этот флажок установлен, для навигации по галерее отображается уменьшенное изображение каждого кадра.
Выделить	Определяет цвет выделения для отображаемого кадра.
Расширенные
URL перехода	Разделенный запятыми список URL перехода, соответствующих кадрам галереи. Можно связать с динамическими данными.

 

*Поддержка перелистывания.

Перелистывание поддерживают следующие типы и стили переходов:

• Смещение – обычное
• Секторное
• Стирание – обычное
• Стирание – полосы
• Жалюзи – обычное

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

События, отправляемые компонентом "Галерея переходов"

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

Событие	Описание
Завершение автовоспроизведения	Отправляется после завершения автовоспроизведения по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false.
Кадр активирован	Отправляется в начале активации нового кадра, даже если он ещё не виден.
Кадр показан	Отправляется при показе нового кадра.
Касание кадра	Отправляется, когда пользователь касается кадра.
Однократный поворот завершен	Отправляется после завершения поворота по любой причине. Если истекла заданная продолжительность, значение event.detail.completed будет true, в ином случае – false.
Левый край	Отправляется, когда достигнут левый край галереи.
Правый край	Отправляется, когда достигнут правый край галереи.

Чтобы выбрать одно из этих событий в диалоговом окне "Событие", установите компонент "Галерея переходов" как цель.

Действия, выполняемые компонентом "Галерея переходов"

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

Действие	Параметры настройки
Перейти к кадру	Номер кадра Анимация
Однократный поворот	Начать с текущего кадра
Начать автовоспроизведение	Начать с текущего кадра
Остановить	Нет
Вперед	Нет
Назад	Нет

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

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

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

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

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

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