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