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

Animation

Animating content in your scenes

Animations provide useful feedback to users and add "life" to an application. Viro enables powerful and simple animations on all components.

Animation Transactions

AnimationTransaction is the simplest mechanism for animating properties. To use this API:

  1. Create and configure an AnimationTransaction using static methods
  2. Invoke the setters of the properties you wish to change
  3. Commit the AnimationTransaction

Below is a simple example that animates a Node to a new position.

 AnimationTransaction.begin();
 AnimationTransaction.setAnimationDuration(5000);
 node.setPosition(new Vector(-2, 2.5f, -3));
 AnimationTransaction.commit();

You can also perform more complex animations, like changing the texture of a Material while rotating a Node. The initial texture will crossfade over to the new texture. We do this in the example below while using an "Ease Out" curve to decelerate the animation as it nears its end.

AnimationTransaction.begin();
AnimationTransaction.setAnimationDuration(5000);
AnimationTransaction.setTimingFunction(AnimationTimingFunction.EaseOut);

node.setRotation(new Vector(0, M_PI_2, 0));
node.getGeometry().getMaterials().get(0).setDiffuseTexture(texture);

AnimationTransaction.commit();

Finally, you can also chain animations or respond to the end of an animation by using an AnimationTransaction.Listener. In the snippet below, we move the position of a Node then, once that animation completes, we rotate the Node.

AnimationTransaction.begin();
AnimationTransaction.setAnimationDuration(5000);
AnimationTransaction.setFinishCallback(new AnimationTransaction.Listener() {
    public void onFinished(final AnimationTransaction transaction) {
        AnimationTransaction.begin();
        node.setRotation(new Vector(0, M_PI_2, 0));
        AnimationTransaction.commit();
    }
});
node.setPosition(new Vector(-2, 2.5f, -3));
AnimationTransaction.commit();

The function is invoked after the animation has ended. If the animation is looping, the function is invoked at the end of every loop.

Animatable Properties

The properties that can be animated are:

Node
Node.setPosition()
Node.setRotation()
Node.setScale()
Node.setOpacity()

Material
Material.setShininess()
Material.setDiffuseColor()
Material.setDiffuseTexture()
Material.setSpecularTexture()
Material.setNormalMap()

Light
Light.setIntensity()
Light.setColor()
Light.setTemperature()
DirectionalLight.setDirection()
OmniLight.setPosition()
OmniLight.setAttenuationStartDistance()
OmniLight.setAttenuationEndDistance()
Spotlight.setPosition()
Spotlight.setDirection()
Spotlight.setAttenuationStartDistance()
Spotlight.setAttenuationEndDistance()
Spotlight.setInnerAngle()
Spotlight.setOuterAngle()

Box
All setters

Sphere
All setters

Skeletal Animation

Skeletal animation is a technique for animating complex geometries; for example, to make a humanoid character walk. These animations are typically authored in 3D graphics software, and exported as FBX files. Viro has full support for these animations. For more information, please see the 3D Objects guide.

Animation


Animating content in your scenes

Suggested Edits are limited on API Reference Pages

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