Animations in SmartPlayer

Situation Description

The continuous development of the SmartPlayer platform allows us to offer users new, unique solutions for interacting with content and creating unusual broadcast schedules.
The new functionality, in the form of animations that work during transitions, will add originality to the user's broadcasts and enhance the visual perception of the content.

How It Works

To use animations on content, the user needs to log in to their personal account, go to the "Broadcasts" section, and select the "Create" category.

Example of displaying the "Broadcasts" section and the "Create" category in the personal account

The next step is for the user to designate the area for the broadcast.

Example of displaying the addition of an area to the broadcast in the personal account

Subsequently, the user needs to drag and drop the necessary content into the designated area, where they plan to use animations.
After transferring the required content into the broadcast area, the user needs to click on the content in the area to open the settings list for this content and find the "Animations" block by scrolling down the entire list (or collapsing all previous sections).

Example of displaying animation settings for content in the personal account

In the opened settings list, the user needs to enable the use of animations with the switch element and configure the available parameters for the correct display of animations in the content.

List of parameters for configuring in the "Animations" block

After completing all the above steps, the user needs to click the "Save" button at the bottom of the screen to apply all animation settings to the content.
When adding a second, third, and other content to the broadcast, the animation can be configured on all content in a similar manner. The entire list of animations is available at the link list of animations

An alternative option is to perform identical actions, but initially select the "Content on Devices" section instead of the "Broadcasts" section and the "Create" category. The only difference in this case is that in the "Content on Devices" section, only one content is used and applied specifically to the device with a schedule, so the animation can only be used for one content.

Example of displaying the difference in adding animations through different sections of the personal account

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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