Анимации в SmartPlayer

Материал из 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, а также умеет ее использовать под свои собственные нужды.