The Viro Developer Hub

Welcome to the Viro developer hub. You'll find comprehensive guides and sample code to help you start working with Viro as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

ViroAnimatedComponent

ViroAnimatedComponent is DEPRECATED in Viro 2.0.0+

Use the animation property on the individual components.

Refer to the Develop Animation guide for more information.

A ViroAnimatedComponent contains as a child a component on which it is set to animate. A ViroAnimatedComponent can have only 1 child to animate. See our Animation Guide for more information on animation.

Example use:
<ViroAnimatedComponent
    animation="rotateAroundYAxis"
    delay={1000}
    loop={true}
    onStart={this._onStart}
    onFinish={this._onFinish}
    run={true}>

   <Viro3DObject source={require('./res/skeleton.obj')}
                           position={[-0.0, -5.5, -1.15]}
                           materials={["skeleton"]} />
</ViroAnimatedComponent>

Props

Optional Props

PropKey
PropType

animation

PropTypes.string

The name of the animation.

delay

PropTypes.number

The delay in milliseconds to apply before executing the specified animation.

loop

PropTypes.bool

True if the animation should loop. Set to false by default.

onFinish

PropTypes.func

Callback invoked when the animation has finished. If loop is set to true, this is invoked every time the animation loops.

onStart

PropTypes.func

Callback invoked when the animation has started. If loop is set to true, this is invoked every time the animation loops.

run

PropTypes.bool

Set to true to start the animation. If you set to false, this will pause the animation. The default value is true.

ViroAnimatedComponent


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.