Анимации в SmartPlayer

Описание ситуации

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

Принцип действия

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

Пример отображения раздела "Трансляции" и категории "Создать" в личном кабинете

Следующим шагом пользователю необходимо выделить зону для трансляции.

Пример отображения добавления зоны в трансляцию в личном кабинете

В последствии в выделенную зону перенести необходимый контент с помощью drag-n-drop (перетягивания контента из списка), на котором он планирует использовать анимации.
После переноса нужного контента в зону трансляции, пользователю необходимо кликнуть по контенту в зоне, чтобы открыть список настроек для данного контента и найти нужный блок "Анимации", проскроллив вниз весь список (или же свернув все предыдущие разделы).

Пример отображения настроек анимации для контента в личном кабинете

В открывшемся списке настроек пользователю необходимо включить использование анимации с помощью переключателя/switch - элемента и настроить доступные параметры, для корректного отображения анимации в контенте.

Список параметров для настройки в блоке "Анимации"

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

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

Пример различия отображения добавления анимации через разные разделы личного кабинета

Доступные типы контента для взаимодействия с анимациями

К типам контента, на которых доступна анимация относятся:

• Видеоконтент
• Аудиоконтент
• Контент в формате изображений
• Контент в формате web-ссылки
• Контент в формате стрим-ссылки

Список доступных параметров настройки анимации для контента

В список настраиваемых параметров анимации для контента входа:

• Использовать анимации - переключатель/switch-элемент позволяющий включить использование анимации на контенте
• Анимация в начале воспроизведения - позволяет выбрать анимацию для контента, которая будет использована при старте проигрывания контента
• Длительность анимации в начале воспроизведения - позволяет выбрать длительность анимации при запуске проигрываемого контента. Измеряется в миллисекундах (мс) и имеет стандартное значение - 300
• Анимация в конце воспроизведения - позволяет выбрать анимацию для контента, которая будет использована при завершении проигрывания контента
• Длительность анимации в конце воспроизведения - позволяет выбрать длительность анимации при завершении проигрываемого контента. Измеряется в миллисекундах (мс) и имеет стандартное значение - 300
• Анимация в процессе воспроизведения - позволяет выбрать анимацию для контента, которая будет использоваться в процессе проигрывания контента
• Скорость анимации - позволяет выбрать с какой скоростью будет использоваться анимация во время проигрывания контента. Отображается в виде шкалы с ползунком

Список параметров для настройки в блоке "Анимации"

Список доступных анимация работающих в начале воспроизведения контента

Для создания анимации в начале воспроизведения контента доступен следующий список:

• Плавное появление
• Плавное появление со смещением вниз
• Плавное появление со смещением вверх
• Плавное появление со смещением влево
• Плавное появление со смещением вправо
• Плавное появление со смещением в правый нижний угол
• Плавное появление со смещением в левый нижний угол
• Плавное появление со смещением в правый верхний угол
• Плавное появление со смещением в левый верхний угол
• Смещение сверху вниз + зум
• Смещение слева направо + зум
• Смещение справа налево + зум
• Смещение снизу вверх + зум
• Приближение с эффектом оттягивания
• Смещение сверху вниз с эффектом оттягивания
• Смещение справа налево с эффектом оттягивания
• Смещение снизу вверх с эффектом оттягивания
• Смещение справа налево с эффектом "желе"
• Смещение слева направо с эффектом "желе"
• Вращение по центру
• Вращение слева направо по часовой стрелке
• Вращение слева направо против часовой стрелки
• Вращение справа налево по часовой стрелке
• Вращение справа налево против часовой стрелки
• Скольжение справа налево
• Скольжение снизу вверх

Список доступных анимация работающих в конце воспроизведения контента

Для создания анимации в конце воспроизведения контента доступен следующий список:

• Плавное исчезновение
• Плавное исчезновение со смещением вниз
• Плавное исчезновение со смещением вверх
• Плавное исчезновение со смещением влево
• Плавное исчезновение со смещением вправо
• Плавное исчезновение со смещением в левый верхний угол
• Плавное исчезновение со смещением в левый нижний угол
• Плавное исчезновение со смещением в правый верхний угол
• Плавное исчезновение со смещением в правый нижний угол
• Зум + эффект выпадения вниз
• Зум + эффект выпадения вверх
• Зум + эффект выпадения слева направо
• Зум + эффект выпадения справа налево
• Сжатие + смещение вверх
• Сжатие + смещение вниз
• Сжатие + смещение влево
• Сжатие + смещение вправо
• Смещение вправо с искажением
• Смещение влево с искажением
• Плавное исчезновение + вращение по центру
• Плавное исчезновение + вращение вниз
• Плавное исчезновение + вращение вверх
• Уменьшение масштаба
• Уменьшение масштаба со смещением вверх
• Уменьшение масштаба со смещением вниз
• Уменьшение масштаба со смещением влево
• Уменьшение масштаба со смещением вправо
• Смещение вниз
• Смещение вверх
• Смещение влево
• Смещение вправо

Список доступных анимация работающих в процессе воспроизведения контента

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

• Пульсация
• Подпрыгивания
• Мигание
• Эффект оттягивания
• Эффект тряски по оси Х
• Эффект тряски по оси Y
• Покачивание
• Эффект веера
• Эффект желе
• Сердцебиение

Ограничения при работе с анимацией внутри платформы SmartPlayer

У данного функционала есть следующий список ограничений:

• Предпросмотр анимации доступен только для видеоконтента
• На устройствах под управлением Android OS не работает анимация типа "rotation" - вращение
• При использовании анимации на Android OS связанной с изменением положением, контент проигрывается параллельно нижней кромки
• На устройствах под управлением Android OS отсутствуют прозрачные анимации, в связи с большой нагрузкой на устройства
• На устройствах под управлением Android OS отключены анимации "желе"
• При наличии двух видеоконтентов в трансляции на устройствах Android OS, на которых не установлена анимация в конце контента, видеоконтент будет уходить в затемнение автоматически.
• При наличии двух видеоконтентов в трансляции на устройствах Windows, на которых не установлена анимация в конце контента, видеоконтент будет резко обрываться и переходить к проигрыванию другого контента

Массовое применение анимации

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

Пример отображения пути

Откроется окно трансляции, в котором необходимо сделать зону и накинуть несколько различных контентов.

На данный момент массовое применение анимации работает только на контента формата картинки и видео.

Пример отображения зоны с контентами в трансляции

Далее выбрать в строке таймлайнов переключить отображение контентов на «Вертикальное представление» и кликом выбрать нужный контент.

Пример отображения параметров отображения в таймлайне трансляции

После этого перейти в окно в тулбар справа, выбрать блок «Настройки контента» и категорию «Общие».

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

Проскроллить страницу тулбара до строки «Применить анимацию ко всему контенту».

Пример отображения в тулбаре настройки «Применить анимацию ко всему контенту»

Нажать на кнопку «Применить» и кликнуть по кнопке «Сохранить» в нижней части тулбара.

Пример отображение кнопок «Применить» и «Сохранть»

Анимации для текста

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

Пример отображение активации анимации для контента в формате текста

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

Пример отображение кнопок «Применить» и «Сохранть»

Видеоинструкция

Взаимодействие с анимацией внутри платформы SmartPlayer

Итоговый результат

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