Анимации в SmartPlayer: различия между версиями

Материал из SmartPlayer
(Новая страница: «== '''Описание ситуации''' == Постоянное развитие платформы SmartPlayer позволяет предлагать пользователю новый, уникальные решения для взаимодействия с контентом и создания необычных эфирных сеток.<br> Новая функциональность, в виде анимации, работающих при п...»)
 
Нет описания правки
 
(не показано 18 промежуточных версий этого же участника)
Строка 1: Строка 1:
<languages/>
<translate>
<!--T:1-->
== '''Описание ситуации''' ==
== '''Описание ситуации''' ==
Постоянное развитие платформы SmartPlayer позволяет предлагать пользователю новый, уникальные решения для взаимодействия с контентом и создания необычных эфирных сеток.<br>
Постоянное развитие платформы SmartPlayer позволяет предлагать пользователю новый, уникальные решения для взаимодействия с контентом и создания необычных эфирных сеток.<br>
Строка 4: Строка 7:
== '''Принцип действия''' ==
== '''Принцип действия''' ==
Для того, чтобы пользователь смог использовать анимации на контенте, ему необходимо авторизоваться в личном кабинете и перейти в раздел "Трансляции" и выбрав категорию "Создать".
Для того, чтобы пользователь смог использовать анимации на контенте, ему необходимо авторизоваться в личном кабинете и перейти в раздел "Трансляции" и выбрав категорию "Создать".
Следующим шагом пользователю необходимо выделить зону для трансляции и перенести в эту зону необходимый контент с помощью drag-n-drop (перетягивания контента из списка), на котором он планирует использовать анимации.
[[File:Создание_трансляции в лк.png|thumb|center| Пример отображения раздела "Трансляции" и категории "Создать" в личном кабинете |800px]]
После переноса нужного контента в зону трансляции, пользователю необходимо кликнуть по контенту в зоне, чтобы открыть список настроек для данного контента.
Следующим шагом пользователю необходимо выделить зону для трансляции.
В открывшемся списке настроек пользователю необходимо найти блок "Анимация" и обязательно его включить с помощью ползунка.
[[File:Добавление_зоны.png|thumb|center| Пример отображения добавления зоны в трансляцию в личном кабинете |800px]]
После всех вышеописанных шагов, пользователю станет доступна анимация для контента.
В последствии в выделенную зону перенести необходимый контент с помощью drag-n-drop (перетягивания контента из списка), на котором он планирует использовать анимации.<br>
При добавлении второго, третьего и прочих контентов в трансляции анимацию можно настроить на всех контентах по аналогии.
После переноса нужного контента в зону трансляции, пользователю необходимо кликнуть по контенту в зоне, чтобы открыть список настроек для данного контента и найти нужный блок "Анимации", проскроллив вниз весь список (или же свернув все предыдущие разделы).
{{Note|Альтернативный вариант проделать идентичные действия, только изначально выбирать не раздел "Трансляции" и категорию "Создать", а выбрать раздел "Контент на устройства". Единственное различие в данном случае что в разделе "Контент на устройства" используется только один контент для устройства и поэтому может быть использована анимация только для одного контента.|warn}}  
[[File:Список_настроек_конетнта анимации.png|thumb|center| Пример отображения настроек анимации для контента в личном кабинете|800px]]
=== '''Доступные типы контента''' ===
В открывшемся списке настроек пользователю необходимо включить использование анимации с помощью переключателя/switch - элемента и настроить доступные параметры, для корректного отображения анимации в контенте.
К типам контента на которых доступна анимация относятся:
[[File:Настройки_анмиации.png|thumb|center| Список параметров для настройки в блоке "Анимации"|800px]]
После всех вышеописанных шагов, пользователю необходимо нажать внизу экрана кнопку "Сохранить", для применения всех настроек анимации к контенту.<br>
При добавлении второго, третьего и прочих контентов в трансляции, анимацию можно настроить на всех контентах по аналогии.
Весь список анимаций доступен по ссылке [https://animate.style/ список анимаций]
{{Note|Альтернативный вариант проделать идентичные действия, только изначально выбирать не раздел "Трансляции" и категорию "Создать", а выбрать раздел "Контент на устройства". Единственное различие в данном случае что в разделе "Контент на устройства" используется только один контент и применяется конкретно на устройство с расписанием и поэтому может быть использована анимация только для одного контента.
[[File:Возможность_добавить_контенты.png|thumb|center| Пример различия отображения добавления анимации через разные разделы личного кабинета|800px]]|warn}}  
</translate>
<translate>
<!--T:2-->
=== '''Доступные типы контента для взаимодействия с анимациями''' ===
К типам контента, на которых доступна анимация относятся:
* Видеоконтент
* Видеоконтент
* Аудиоконтент
* Аудиоконтент
Строка 17: Строка 30:
* Контент в формате web-ссылки
* Контент в формате web-ссылки
* Контент в формате стрим-ссылки
* Контент в формате стрим-ссылки
<!--T:3-->
=== '''Список доступных параметров настройки анимации для контента''' ===
=== '''Список доступных параметров настройки анимации для контента''' ===
В список настраиваемых параметров анимации для контента входа:
В список настраиваемых параметров анимации для контента входа:
* Использовать анимации
* Использовать анимации - переключатель/switch-элемент позволяющий включить использование анимации на контенте
* Анимация в начале воспроизведения
* Анимация в начале воспроизведения - позволяет выбрать анимацию для контента, которая будет использована при старте проигрывания контента
* Длительность анимации в начале воспроизведения
* Длительность анимации в начале воспроизведения - позволяет выбрать длительность анимации при запуске проигрываемого контента. Измеряется в миллисекундах (мс) и имеет стандартное значение - 300
* Анимация в конце воспроизведения
* Анимация в конце воспроизведения - позволяет выбрать анимацию для контента, которая будет использована при завершении проигрывания контента
* Длительность анимации в конце воспроизведения
* Длительность анимации в конце воспроизведения - позволяет выбрать длительность анимации при завершении проигрываемого контента. Измеряется в миллисекундах (мс) и имеет стандартное значение - 300
* Анимация в процессе воспроизведения
* Анимация в процессе воспроизведения - позволяет выбрать анимацию для контента, которая будет использоваться в процессе проигрывания контента
* Скорость анимации  
* Скорость анимации - позволяет выбрать с какой скоростью будет использоваться анимация во время проигрывания контента. Отображается в виде шкалы с ползунком
{{Note|Для видеоконтента с включенной анимацией доступна возможность предпросмотра получившегося результата. Для остальных типов контентов предпросмотр недоступен. |warn}}
[[File:Настройки_анмиации.png|thumb|center| Список параметров для настройки в блоке "Анимации"|800px]]
==== '''Список доступных анимация работающих в начале воспроизведения''' ====
</translate>
<translate>
<!--T:4-->
==== '''Список доступных анимация работающих в начале воспроизведения контента''' ====
Для создания анимации в начале воспроизведения контента доступен следующий список:
Для создания анимации в начале воспроизведения контента доступен следующий список:
==== '''Список доступных анимация работающих в конце воспроизведения''' ====
* Плавное появление
* Плавное появление со смещением вниз
* Плавное появление со смещением вверх
* Плавное появление со смещением влево
* Плавное появление со смещением вправо
* Плавное появление со смещением в правый нижний угол
* Плавное появление со смещением в левый нижний угол
* Плавное появление со смещением в правый верхний угол
* Плавное появление со смещением в левый верхний угол
* Смещение сверху вниз + зум
* Смещение слева направо + зум
* Смещение справа налево + зум
* Смещение снизу вверх + зум
* Приближение с эффектом оттягивания
* Смещение сверху вниз с эффектом оттягивания
* Смещение справа налево с эффектом оттягивания
* Смещение снизу вверх с эффектом оттягивания
* Смещение справа налево с эффектом "желе"
* Смещение слева направо с эффектом "желе"
* Вращение по центру
* Вращение слева направо по часовой стрелке
* Вращение слева направо против часовой стрелки
* Вращение справа налево по часовой стрелке
* Вращение справа налево против часовой стрелки
* Скольжение справа налево
* Скольжение снизу вверх
</translate>
<translate>
 
<!--T:5-->
==== '''Список доступных анимация работающих в конце воспроизведения контента''' ====
Для создания анимации в конце воспроизведения контента доступен следующий список:
Для создания анимации в конце воспроизведения контента доступен следующий список:
==== '''Список доступных анимация работающих в процессе воспроизведения''' ====
* Плавное исчезновение
* Плавное исчезновение со смещением вниз
* Плавное исчезновение со смещением вверх
* Плавное исчезновение со смещением влево
* Плавное исчезновение со смещением вправо
* Плавное исчезновение со смещением в левый верхний угол
* Плавное исчезновение со смещением в левый нижний угол
* Плавное исчезновение со смещением в правый верхний угол
* Плавное исчезновение со смещением в правый нижний угол
* Зум + эффект выпадения вниз
* Зум + эффект выпадения вверх
* Зум + эффект выпадения слева направо
* Зум + эффект выпадения справа налево
* Сжатие + смещение вверх
* Сжатие + смещение вниз
* Сжатие + смещение влево
* Сжатие + смещение вправо
* Смещение вправо с искажением
* Смещение влево с искажением
* Плавное исчезновение + вращение по центру
* Плавное исчезновение + вращение вниз
* Плавное исчезновение + вращение вверх
* Уменьшение масштаба
* Уменьшение масштаба со смещением вверх
* Уменьшение масштаба со смещением вниз
* Уменьшение масштаба со смещением влево
* Уменьшение масштаба со смещением вправо
* Смещение вниз
* Смещение вверх
* Смещение влево
* Смещение вправо
</translate>
<translate>
 
<!--T:6-->
==== '''Список доступных анимация работающих в процессе воспроизведения контента''' ====
Для создания анимации работающих в процессе воспроизведения контент доступен следующий список:
Для создания анимации работающих в процессе воспроизведения контент доступен следующий список:
* Пульсация
* Подпрыгивания
* Мигание
* Эффект оттягивания
* Эффект тряски по оси Х
* Эффект тряски по оси Y
* Покачивание
* Эффект веера
* Эффект желе
* Сердцебиение
<!--T:7-->
== '''Ограничения при работе с анимацией внутри платформы SmartPlayer''' ==
У данного функционала есть следующий список ограничений:
* Предпросмотр анимации доступен только для видеоконтента
* На устройствах под управлением Android OS не работает анимация типа "rotation" - вращение
* При использовании анимации на Android OS связанной с изменением положением, контент проигрывается параллельно нижней кромки
* На устройствах под управлением Android OS отсутствуют прозрачные анимации, в связи с большой нагрузкой на устройства
* На устройствах под управлением Android OS отключены анимации "желе"
* При наличии двух видеоконтентов в трансляции на устройствах Android OS, на которых не установлена анимация в конце контента, видеоконтент будет уходить в затемнение автоматически.
* При наличии двух видеоконтентов в трансляции на устройствах Windows, на которых не установлена анимация в конце контента, видеоконтент будет резко обрываться и переходить к проигрыванию другого контента
<!--T:8-->
== '''Видеоинструкция''' ==
== '''Видеоинструкция''' ==
[https://www.youtube.com/watch?v=IJVt2ZOdqc8 Взаимодействие с анимацией внутри платформы SmartPlayer]
== '''Итоговый результат''' ==
== '''Итоговый результат''' ==
Пользователь понимает и знает как можно взаимодействовать с различной анимацией, доступной внутри платформы SmartPlayer, а также умеет ее использовать под свои собственные нужды.
Пользователь понимает и знает как можно взаимодействовать с различной анимацией, доступной внутри платформы SmartPlayer, а также умеет ее использовать под свои собственные нужды.
</translate>

Текущая версия от 13:11, 8 июля 2024

Другие языки:

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

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