Animation
Animation component for animating renderable node fields using interpolator functions
import { Animation } from "@roku-sdk/components";Animation(props: IAnimationProps): JSX.ElementDescription
Animation component for animating renderable node fields using interpolator functions.
Requires child field interpolator nodes (FloatFieldInterpolator, Vector2DFieldInterpolator, ColorFieldInterpolator) to define which fields to animate. Supports various easing functions to control the animation's speed curve.
Playback can be controlled declaratively via the control prop or imperatively via an AnimationRef obtained through the ref prop.
Parameters
| Name | Type | Description |
|---|---|---|
props | IAnimationProps |
Example
<animation duration={1} repeat={true} easeFunction="linear" control="start">
<vector2dFieldInterpolator
key={[0.0, 0.5, 1.0]}
keyValue={[[0, 0], [500, 0], [500, 200]]}
fieldToInterp="myPoster.translation"
/>
</animation>Types
IAnimationProps
Properties for the Animation node.
Animation provides animations of renderable nodes by applying interpolator functions to the values in specified renderable node fields. Requires child field interpolator nodes (FloatFieldInterpolator, Vector2DFieldInterpolator, ColorFieldInterpolator) for each animated field.
| Name | Type | Description |
|---|---|---|
duration? | number | Duration of the animation in seconds. |
easeFunction? | EaseFunction | Interpolator function used for the animation. |
easeInPercent? | number | If easeFunction is set to "piecewise", sets the percentage of the animation duration during which ease-in is applied. The sum of easeInPercent and easeOutPercent must be <= 1. Ignored for all other easeFunction values. |
easeOutPercent? | number | If easeFunction is set to "piecewise", sets the percentage of the animation duration during which ease-out is applied. The sum of easeInPercent and easeOutPercent must be <= 1. Ignored for all other easeFunction values. |
onWillBeSkipped? | EventHandler<boolean> | Fired when the willBeSkipped status changes. Indicates whether the animation will be skipped (rendered in its final state). |
optional? | boolean | Set to true to skip animations on lower-performing Roku devices. When skipped, setting control to "start" causes state to transition running -> finished immediately, allowing any state observers to be properly called. |
Extends IAnimationBaseProps.
Updated about 3 hours ago