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

Available Content Types for Interaction with Animations

The types of content on which animations are available include:

• Video content
• Audio content
• Image format content
• Web link format content
• Stream link format content

List of Available Animation Settings Parameters for Content

The list of configurable animation parameters for content includes:

• Use animations - a switch element that allows enabling animations on the content
• Animation at the start of playback - allows selecting an animation for the content that will be used at the start of playback
• Duration of animation at the start of playback - allows selecting the duration of the animation at the start of the content playback. Measured in milliseconds (ms) and has a default value of 300
• Animation at the end of playback - allows selecting an animation for the content that will be used at the end of playback
• Duration of animation at the end of playback - allows selecting the duration of the animation at the end of the content playback. Measured in milliseconds (ms) and has a default value of 300
• Animation during playback - allows selecting an animation for the content that will be used during the playback
• Animation speed - allows selecting the speed at which the animation will be used during playback. Displayed as a slider scale

List of settings parameters in the "Animations" block

For video content with animations enabled, a preview of the resulting effect is available. For other types of content, preview is not available.

List of Available Animations Working at the Start of Content Playback

The following list of animations is available for creating animations at the start of content playback:

• Smooth appearance
• Smooth appearance with downward offset
• Smooth appearance with upward offset
• Smooth appearance with leftward offset
• Smooth appearance with rightward offset
• Smooth appearance with offset to the lower right corner
• Smooth appearance with offset to the lower left corner
• Smooth appearance with offset to the upper right corner
• Smooth appearance with offset to the upper left corner
• Downward movement + zoom
• Leftward movement + zoom
• Rightward movement + zoom
• Upward movement + zoom
• Zoom in with pull-back effect
• Downward movement with pull-back effect
• Rightward movement with pull-back effect
• Upward movement with pull-back effect
• Rightward movement with "jelly" effect
• Leftward movement with "jelly" effect
• Rotation around the center
• Left to right rotation clockwise
• Left to right rotation counterclockwise
• Right to left rotation clockwise
• Right to left rotation counterclockwise
• Sliding from right to left
• Sliding from bottom to top

List of Available Animations Working at the End of Content Playback

The following list of animations is available for creating animations at the end of content playback:

• Smooth disappearance
• Smooth disappearance with downward offset
• Smooth disappearance with upward offset
• Smooth disappearance with leftward offset
• Smooth disappearance with rightward offset
• Smooth disappearance with offset to the upper left corner
• Smooth disappearance with offset to the lower left corner
• Smooth disappearance with offset to the upper right corner
• Smooth disappearance with offset to the lower right corner
• Zoom + drop-down effect
• Zoom + drop-up effect
• Zoom + drop left to right effect
• Zoom + drop right to left effect
• Compression + upward offset
• Compression + downward offset
• Compression + leftward offset
• Compression + rightward offset
• Rightward offset with distortion
• Leftward offset with distortion
• Smooth disappearance + rotation around the center
• Smooth disappearance + downward rotation
• Smooth disappearance + upward rotation
• Zoom out
• Zoom out with upward offset
• Zoom out with downward offset
• Zoom out with leftward offset
• Zoom out with rightward offset
• Downward movement
• Upward movement
• Leftward movement
• Rightward movement

List of Available Animations Working During Content Playback

The following list of animations is available for creating animations working during content playback:

• Pulsation
• Bouncing
• Flashing
• Pulling effect
• Shaking effect along the X-axis
• Shaking effect along the Y-axis
• Swaying
• Fan effect
• Jelly effect
• Heartbeat

Limitations When Working with Animation Inside the SmartPlayer Platform

This functionality has the following list of limitations:

• Animation preview is only available for video content.
• On devices running Android OS, the "rotation" type animation does not work.
• When using position-changing animation on Android OS, the content plays parallel to the bottom edge.
• Transparent animations are not available on devices running Android OS due to high device load.
• "Jelly" animations are disabled on devices running Android OS.
• If there are two video contents in the broadcast on Android OS devices without end-content animation, the video content will fade out automatically.
• If there are two video contents in the broadcast on Windows devices without end-content animation, the video content will abruptly stop and transition to playing the other content.

Video Tutorial

Interaction with Animation Inside the SmartPlayer Platform

Final Result

The user understands and knows how to interact with various animations available within the SmartPlayer platform and can use them for their own needs.