{"_id":"5bec8a59a9db0c0012d540f8","category":{"_id":"5bec8a59a9db0c0012d540d9","project":"5a065a6134873d0010b396ab","version":"5bec8a59a9db0c0012d54110","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2018-05-24T14:46:44.164Z","from_sync":false,"order":3,"slug":"enhanced-scenes","title":"Enhanced Scenes"},"parentDoc":null,"user":"578c4a62bd223d2000cc143e","project":"5a065a6134873d0010b396ab","version":{"_id":"5bec8a59a9db0c0012d54110","project":"5a065a6134873d0010b396ab","__v":0,"forked_from":"5ba1a04d4f89f700039d85d0","createdAt":"2018-04-18T18:19:34.288Z","releaseDate":"2018-04-18T18:19:34.288Z","categories":["5bec8a59a9db0c0012d540d4","5bec8a59a9db0c0012d540d5","5bec8a59a9db0c0012d540d6","5b05923ea5a2f9000357b452","5b05f793c2c86c0003cbe414","5bec8a59a9db0c0012d540d7","5bec8a59a9db0c0012d540d8","5bec8a59a9db0c0012d540d9"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.12.0","version":"1.12.0"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T20:54:06.700Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"Animations provide useful feedback to users and add \"life\" to an application. Viro enables powerful and simple animations on all components. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Animation Transactions\"\n}\n[/block]\n[AnimationTransaction](https://developer.viromedia.com/virocore/reference/com/viro/core/AnimationTransaction.html) is the simplest mechanism for animating properties. To use this API:\n\n1. Create and configure an AnimationTransaction using static methods\n2. Invoke the setters of the properties you wish to change\n3. Commit the AnimationTransaction\n\nBelow is a simple example that animates a Node to a new position.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" AnimationTransaction.begin();\\n AnimationTransaction.setAnimationDuration(5000);\\n node.setPosition(new Vector(-2, 2.5f, -3));\\n AnimationTransaction.commit();\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nYou 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"AnimationTransaction.begin();\\nAnimationTransaction.setAnimationDuration(5000);\\nAnimationTransaction.setTimingFunction(AnimationTimingFunction.EaseOut);\\n\\nnode.setRotation(new Vector(0, M_PI_2, 0));\\nnode.getGeometry().getMaterials().get(0).setDiffuseTexture(texture);\\n\\nAnimationTransaction.commit();\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\nFinally, 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"AnimationTransaction.begin();\\nAnimationTransaction.setAnimationDuration(5000);\\nAnimationTransaction.setFinishCallback(new AnimationTransaction.Listener() {\\n    public void onFinished(final AnimationTransaction transaction) {\\n        AnimationTransaction.begin();\\n        node.setRotation(new Vector(0, M_PI_2, 0));\\n        AnimationTransaction.commit();\\n    }\\n});\\nnode.setPosition(new Vector(-2, 2.5f, -3));\\nAnimationTransaction.commit();\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nThe function is invoked after the animation has ended. If the animation is looping, the function is invoked at the end of every loop.\n[block:api-header]\n{\n  \"title\": \"Animatable Properties\"\n}\n[/block]\nThe properties that can be animated are:\n\n[Node](https://developer.viromedia.com/virocore/reference/com/viro/core/Node.html)\n`Node.setPosition()`\n`Node.setRotation()`\n`Node.setScale()`\n`Node.setOpacity()`\n\n[Material](https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html)\n`Material.setShininess()`\n`Material.setDiffuseColor()`\n`Material.setDiffuseTexture()`\n`Material.setSpecularTexture()`\n`Material.setNormalMap()`\n\n[Light](https://developer.viromedia.com/virocore/reference/com/viro/core/Light.html)\n`Light.setIntensity()`\n`Light.setColor()`\n`Light.setTemperature()`\n`DirectionalLight.setDirection()`\n`OmniLight.setPosition()`\n`OmniLight.setAttenuationStartDistance()`\n`OmniLight.setAttenuationEndDistance()`\n`Spotlight.setPosition()`\n`Spotlight.setDirection()`\n`Spotlight.setAttenuationStartDistance()`\n`Spotlight.setAttenuationEndDistance()`\n`Spotlight.setInnerAngle()`\n`Spotlight.setOuterAngle()`\n\n[Box](https://developer.viromedia.com/virocore/reference/com/viro/core/Box.html)\nAll setters\n\n[Sphere](https://developer.viromedia.com/virocore/reference/com/viro/core/Sphere.html)\nAll setters\n\n# Skeletal Animation\n\nSkeletal 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](doc:3d-objects) guide.","excerpt":"Animating content in your scenes","slug":"animation","type":"basic","title":"Animation"}

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. [block:api-header] { "type": "basic", "title": "Animation Transactions" } [/block] [AnimationTransaction](https://developer.viromedia.com/virocore/reference/com/viro/core/AnimationTransaction.html) 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. [block:code] { "codes": [ { "code": " AnimationTransaction.begin();\n AnimationTransaction.setAnimationDuration(5000);\n node.setPosition(new Vector(-2, 2.5f, -3));\n AnimationTransaction.commit();", "language": "java" } ] } [/block] 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. [block:code] { "codes": [ { "code": "AnimationTransaction.begin();\nAnimationTransaction.setAnimationDuration(5000);\nAnimationTransaction.setTimingFunction(AnimationTimingFunction.EaseOut);\n\nnode.setRotation(new Vector(0, M_PI_2, 0));\nnode.getGeometry().getMaterials().get(0).setDiffuseTexture(texture);\n\nAnimationTransaction.commit();", "language": "java" } ] } [/block] 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. [block:code] { "codes": [ { "code": "AnimationTransaction.begin();\nAnimationTransaction.setAnimationDuration(5000);\nAnimationTransaction.setFinishCallback(new AnimationTransaction.Listener() {\n public void onFinished(final AnimationTransaction transaction) {\n AnimationTransaction.begin();\n node.setRotation(new Vector(0, M_PI_2, 0));\n AnimationTransaction.commit();\n }\n});\nnode.setPosition(new Vector(-2, 2.5f, -3));\nAnimationTransaction.commit();", "language": "text" } ] } [/block] The function is invoked after the animation has ended. If the animation is looping, the function is invoked at the end of every loop. [block:api-header] { "title": "Animatable Properties" } [/block] The properties that can be animated are: [Node](https://developer.viromedia.com/virocore/reference/com/viro/core/Node.html) `Node.setPosition()` `Node.setRotation()` `Node.setScale()` `Node.setOpacity()` [Material](https://developer.viromedia.com/virocore/reference/com/viro/core/Material.html) `Material.setShininess()` `Material.setDiffuseColor()` `Material.setDiffuseTexture()` `Material.setSpecularTexture()` `Material.setNormalMap()` [Light](https://developer.viromedia.com/virocore/reference/com/viro/core/Light.html) `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](https://developer.viromedia.com/virocore/reference/com/viro/core/Box.html) All setters [Sphere](https://developer.viromedia.com/virocore/reference/com/viro/core/Sphere.html) 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](doc:3d-objects) guide.