Компонент "Таблица спрайтов"

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

С помощью компонента "Таблица спрайтов" можно создавать анимации спрайтов или показывать спрайты изображений отдельно, используя только один исходный файл.

  

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

Как добавить в проект компонент "Таблица спрайтов"

  1. Откройте панель Компоненты, а затем папку Графика и эффекты.
  2. Перетащите компонент Таблица спрайтов в рабочую область.
  3. На панели Свойства в разделе компонента Таблица спрайтов введите URL исходной таблицы спрайтов в поле Источник. Чтобы использовать локальный файл, нажмите в этом поле кнопку Обзор и выберите файл на компьютере.
  4. Введите параметры Смещение по оси X, Смещение по оси Y, Ширина кадра и Высота кадра для спрайта, который нужно показать. Если вы создаете анимацию, спрайт будет отображаться в первом кадре анимации.
  5. В зависимости от предполагаемого использования таблицы спрайтов, отобразите другие спрайты или создайте анимацию.

    Чтобы показать другие спрайты:

    1. Добавьте ещё один компонент "Таблица спрайтов".
    2. Настройте новый компонент, используя тот же источник, но с отступом и параметрами кадра для спрайта, который вы хотите показать в этом компоненте.

    Чтобы создать анимацию спрайтов:

    1. Разверните Дополнительные свойства на панели Свойства для компонента "Таблица спрайтов".
    2. Введите Количество кадров в анимации. Компонент показывает один спрайт на кадр (все спрайты должны быть одинакового размера).
    3. Установите флажок Автовоспроизведение, чтобы воспроизводить анимацию автоматически. Кроме того, анимацию можно активировать, настроив событие. Для этого выберите Таблица спрайтов > Воспроизвести или команду Включить/выключить анимацию (как описано ниже).

Свойства

Свойство Описание
Название Имя компонента.
Источник URL изображения, которое используется в качестве таблицы спрайтов. Можно связать с динамическими данными.
X Offset (Смещение по оси X) Смещение в пикселях от левого края таблицы спрайтов до спрайта.
Y Offset (Смещение по оси Y) Смещение в пикселях от верхней части таблицы спрайтов до спрайта.
Ширина кадра Ширина спрайта в пикселях.
Высота кадра Высота спрайта в пикселях.
Выравнивание

Положение спрайта в компоненте:

  • center (по центру)
  • bottom (по нижнему краю)
  • bottom left (по нижнему левому краю)
  • bottom right (по нижнему правому краю)
  • left (по левому краю)
  • right (по правому краю)
  • top (по верхнему краю)
  • top left (по верхнему левому краю)
  • top right (по верхнему правому краю)
Масштаб

Формат показа спрайтов, которые отличаются размером от компонента:

  • Вписать по размеру
  • Кадрировать
  • Нет
  • Растянуть и заполнить

Дополнительные свойства

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

Свойство Описание
Number of Frames (Количество кадров) Количество кадров анимации. Если ввести число, превышающее количество спрайтов в таблице, в конец анимации будут добавлены пустые кадры.
Duration (Длительность) Продолжительность показа каждого кадра в миллисекундах.
Number of Loops (Количество повторов) Количество повторов анимации. Задайте значение 0, если нужно бесконечно повторять анимацию.
Автовоспроизведение Если этот флажок установлен, анимация будет воспроизводиться автоматически.
End on frame one​ (Автовоспроизведение) Если этот флажок установлен, после последнего цикла анимация будет заканчиваться на первом кадре.
Reverse (Завершение на начальном кадре) Если этот флажок установлен, анимация будет воспроизводиться в обратном порядке.

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

События, отправляемые компонентом "Таблица спрайтов"

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

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

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

Действия, выполняемые компонентом "Таблица спрайтов"

Другие события могут вызывать следующие действия в компоненте "Таблица спрайтов":

Действие Параметры настройки
Создать анимацию
  • Смещение по оси X. Смещение в пикселях от левой стороны таблицы спрайтов до спрайта.
  • Смещение по оси Y. Смещение в пикселях от верхней части таблицы спрайтов до спрайта.
  • Ширина кадра. Ширина спрайта в пикселях.
  • Высота кадра. Высота спрайта в пикселях.
  • Frames (Кадры). Количество кадров анимации.
  • Duration (Длительность). Продолжительность показа каждого кадра в миллисекундах.
  • Loops (Повторы). Количество повторов анимации. Установите 0, чтобы зациклить анимацию.
  • Автовоспроизведение. Если этот флажок установлен, анимация будет воспроизводиться автоматически.
  • Reverse (Завершение на начальном кадре). Если этот флажок установлен, анимация будет воспроизводиться в обратном порядке.
Воспроизвести Запускает анимацию с текущего места.
Пауза Приостанавливает анимацию.
Включить/выключить анимацию Запускает и приостанавливает воспроизведение анимации.
Повтор Запускает анимацию с первого кадра.
Назад Показывает предыдущий кадр серии.
Вперед Показывает следующий кадр серии.
Перейти к кадру Показывает заданный кадр.

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

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

Предварительный просмотр

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

В интерфейсе Google Web Designer нельзя посмотреть анимацию спрайтов. Для этого нужно открыть документ в предпочитаемом браузере, нажав кнопку Предпросмотр.

Эта информация оказалась полезной?

Как можно улучшить эту статью?
Поиск
Очистить поле поиска
Закрыть поиск
Главное меню
14620423660525160675
true
Поиск по Справочному центру
true
true
true
true
true
5050422
false
false