{"__v":0,"_id":"58f7a4c9cbd001190056cc34","category":{"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","_id":"58f7a4c8cbd001190056cbfc","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"578c4a62bd223d2000cc143e","version":{"__v":1,"_id":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T20:54:06.700Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"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\": \"Overview\"\n}\n[/block]\nAnimations work by *registering* animations with ```ViroAnimations.registerAnimations()```, then *invoking* the animation by wrapping the component to be animated with a ```<ViroAnimatedComponent>```.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Registering Animations\"\n}\n[/block]\nBefore an animation can be used, it must created and registered. Animations are specified by the following properties:\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"properties\",\n    \"h-0\": \"Animation property\",\n    \"1-0\": \"easing\",\n    \"1-1\": \"The pacing of the animation.\\n\\n* ```Linear```: the animation will occur evenly over its duration\\n* ```EaseIn```: the animation will begin slowly and then speed up as it progresses\\n* ```EaseOut```: the animation will begin quickly and then slow as it progresses\\n* ```EaseInEaseOut```: the animation will begin slowly, accelerate through the middle of its duration, and then slow again before completing\\n* ```Bounce```: the animation will begin quickly and *overshoot* its final position before settling into its final resting place\",\n    \"0-1\": \"Dictionary containing the values the component should animate *toward*.\\n\\nAnimatable properties include:\\n\\n* ```opacity```: opacity of an object, [0, 1]\\n* ```positionX```: position of object on x-axis\\n* ```positionY```: position of object on y-axis\\n* ```positionZ```: position of object on z-axis\\n* ```rotateX```: rotation of object around x-axis, in degrees\\n* ```rotateY```: rotation of object around y-axis, in degrees\\n* ```rotateZ```: rotation of object around z-axis, in degrees\\n* ```scaleX```: scale value of object on x-axis\\n* ```scaleY```: scale value of object on y-axis\\n* ```scaleZ```: scale value of object on z-axis\\n* ```material```: the texture, lighting, and other surface properties of the object\",\n    \"2-0\": \"duration\",\n    \"2-1\": \"Length in milliseconds of the animation\",\n    \"3-0\": \"delay\",\n    \"3-1\": \"Delay in milliseconds to wait before starting the animation\",\n    \"h-1\": \"Description\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\nIn the following example, we register an animation that sets the scale of the component to which it is applied to```[1.0, 0.6, 1.0]```, and sets the opacity of said component to ```1.0```. The animation bounces toward its final value, and lasts for five seconds.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ViroAnimations.registerAnimations({\\n    animateImage:{properties:{scaleX:1.0, scaleY:0.6, scaleZ:1.0, \\n                              opacity: 1.0},\\n                  easing:\\\"Bounce\\\", \\n                  duration: 5000},\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Applying Animations\"\n}\n[/block]\nOnce an animation is registered, it needs to be *applied* to the components we wish to animate. To do this, we wrap the component we want to animate in a [```<ViroAnimatedComponent>```](http://docs.viromedia.com/docs/viroanimatedcomponent).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroAnimatedComponent animation='animateImage' run={true}>\\n  <ViroImage source={require('./res/myimage.jpg')} position={[0, -1, -2]} scale={[0.1, 0.1, 0.1]} />\\n</ViroAnimatedComponent>\",\n      \"language\": \"javascript\",\n      \"name\": null\n    }\n  ]\n}\n[/block]\nIn the example above, we apply the ```animateImage``` animation (which we registered in the section above) to the ```<ViroImage>```. The ```<ViroImage>``` initially has a scale of ```[0.1, 0.1, 0.1]```. ```animateImage``` will animate this scale to ```[1.0, 0.6, 1.0]``` over 5 seconds.\n\nThe animation will run immediately after the ```<ViroImage>``` is added to the scene because ```run``` is set to true. If ```run``` were set to false, you could trigger the animation at any time by setting it to true. After a button press, for example.\n\nNote that you can apply a single animation to multiple components.\n\nThe full code for this animation is below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"'use strict';\\n\\nimport React, { Component } from 'react';\\nimport {\\n  ViroScene,\\n  ViroImage,\\n  ViroAnimations,\\n  ViroAnimatedComponent,\\n} from 'react-viro';\\n\\nvar AnimationTest = React.createClass({\\n  render: function() {\\n    <ViroScene>\\n  \\t\\t<ViroAnimatedComponent animation='animateImage' run={true}>\\n        <ViroImage source={require('./res/myimage.jpg')}\\n        \\t\\t\\t     position={[0, -1, -2]} \\t\\t\\n        \\t\\t\\t\\t   scale={[.1, .1, .1]}  />\\n      </ViroAnimatedComponent>\\n    </ViroScene>\\n  }\\n});\\n\\nViroAnimations.registerAnimations({\\n  animateImage:{properties:{scaleX:1, scaleY:.6, scaleZ:1, opacity: 1},  \\n        easing:\\\"Bounce\\\", duration: 5000},\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Looping and Additive Animations\"\n}\n[/block]\nAnimations can be looped, and the target properties for an animation can be set in an additive or multiplicative manner. Below is a simple example showing how to loop an animation that adds to the current property of a component. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var AnimationTest = React.createClass({\\n  render: function() {\\n    <ViroScene>\\n    \\t<ViroAnimatedComponent animation='loopRotate' \\n  \\t  \\t\\t\\t\\t\\t\\t\\t\\t\\t     run={true} loop={true}>\\n      \\t<ViroImage source={require('./res/myimage.jpg')}\\n         \\t        position={[0, -1, -2]} \\t\\t\\n         \\t        scale={[.1, .1, .1]}  />\\n   \\t </ViroAnimatedComponent> \\n    </ViroScene>\\n  }\\n});\\n\\nViroAnimations.registerAnimations({\\n  loopRotate:{properties:{rotateY:\\\"+=45\\\"}, duration:1000},\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe example above rotates an image around the y axis in an infinite loop. The ```rotateY``` property of the ```loopRotate``` animation takes the value ```+=45```. This means it will *add* 45 degrees to the y angle of the component every 1 second. Properties can also be subtracted (-=), multiplied (*=), or divided (/=).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Chaining Animations\"\n}\n[/block]\nSuppose you have a series of animations that you wish to run in sequence. For example, you have an animation that moves a component horizontally called ```moveRight```, and an animation that rotates a component called ```rotate```, and you would like to run these one after the other. You can do the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ViroAnimations.registerAnimations({\\n  moveRight:{properties:{positionX:\\\"+=0.3\\\"}, duration: 10000},\\n  rotate:{properties:{rotateZ:\\\"+=45\\\"}, duration:1000},\\n  rotateAndMovePicture:[\\n      [\\\"moveRight\\\", \\\"rotate\\\"],\\n  ]\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn the example above, we define an *animation chain* called ```rotateAndMovePicture```. It is defined as an array of existing animations. This new animation, when applied, will move the component then rotate it.\n\nIf you want animations to run *in parallel* instead of in sequence, simply define an animation as multiple animation chains, as demonstrated in the following snippet. ```rotateAndMovePicture```, when applied, will start both chains at the same time: the component will move right and rotate concurrently.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ViroAnimations.registerAnimations({\\n  moveRight:{properties:{positionX:\\\"+=0.3\\\"}, duration: 10000},\\n  rotate:{properties:{rotateZ:\\\"+=45\\\"}, duration:1000},\\n  rotateAndMovePicture:[\\n      [\\\"moveRight\\\"],\\n      [\\\"rotate\\\"],\\n  ]\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nFinally, you can also run animation chains, each with multiple sequential steps, concurrently in parallel with one another. The following example makes our component move right, then move back to its original position; while this is happening, the component will also rotate.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ViroAnimations.registerAnimations({\\n\\tmoveRight:{properties:{positionX:\\\"+=0.3\\\"}, duration: 10000},\\n\\tmoveLeft:{properties:{positionX:\\\"-=0.3\\\", rotateZ:\\\"+=45\\\"}, duration: 10000},\\n\\trotate:{properties:{rotateZ:\\\"+=45\\\"}, duration:1000},\\n\\trotateAndMovePicture:[\\n\\t\\t[\\\"moveRight\\\", \\\"moveLeft\\\"],\\n\\t\\t[\\\"rotate\\\"]\\n\\t]\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Animation callbacks\"\n}\n[/block]\nAnimation callbacks can be used to perform an action when an animation starts, or after an animation completes. For example, to respond to the end of an animation, add the desired function to the ```onFinish``` property of the ```<ViroAnimatedComponent>```. Let's look at an example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var AnimationOnFinishTest = React.createClass({\\n  render: function() {\\n    <ViroScene>\\n  \\t\\t<ViroAnimatedComponent animation='animateImage' run={true} \\n                             onFinish={this._onAnimationFinished}\\n          <ViroImage source={require('./res/myimage.jpg')}\\n                     position={[0, -1, -2]} \\t\\t\\n                     scale={[0.1, 0.1, 0.1]} />\\n     </ViroAnimatedComponent>\\n    </ViroScene>\\n  },\\n  \\n _onAnimationFinished(){\\n      console.log(\\\"Animation has finished!\\\");\\n  },\\n});\\n\\nViroAnimations.registerAnimations({\\n    animateImage:{properties:{scaleX:1, scaleY:.6, scaleZ:1, opacity: 1},\\n                  easing:\\\"Bounce\\\", duration: 5000},\\n});\",\n      \"language\": \"javascript\"\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.","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": "Overview" } [/block] Animations work by *registering* animations with ```ViroAnimations.registerAnimations()```, then *invoking* the animation by wrapping the component to be animated with a ```<ViroAnimatedComponent>```. [block:api-header] { "type": "basic", "title": "Registering Animations" } [/block] Before an animation can be used, it must created and registered. Animations are specified by the following properties: [block:parameters] { "data": { "0-0": "properties", "h-0": "Animation property", "1-0": "easing", "1-1": "The pacing of the animation.\n\n* ```Linear```: the animation will occur evenly over its duration\n* ```EaseIn```: the animation will begin slowly and then speed up as it progresses\n* ```EaseOut```: the animation will begin quickly and then slow as it progresses\n* ```EaseInEaseOut```: the animation will begin slowly, accelerate through the middle of its duration, and then slow again before completing\n* ```Bounce```: the animation will begin quickly and *overshoot* its final position before settling into its final resting place", "0-1": "Dictionary containing the values the component should animate *toward*.\n\nAnimatable properties include:\n\n* ```opacity```: opacity of an object, [0, 1]\n* ```positionX```: position of object on x-axis\n* ```positionY```: position of object on y-axis\n* ```positionZ```: position of object on z-axis\n* ```rotateX```: rotation of object around x-axis, in degrees\n* ```rotateY```: rotation of object around y-axis, in degrees\n* ```rotateZ```: rotation of object around z-axis, in degrees\n* ```scaleX```: scale value of object on x-axis\n* ```scaleY```: scale value of object on y-axis\n* ```scaleZ```: scale value of object on z-axis\n* ```material```: the texture, lighting, and other surface properties of the object", "2-0": "duration", "2-1": "Length in milliseconds of the animation", "3-0": "delay", "3-1": "Delay in milliseconds to wait before starting the animation", "h-1": "Description" }, "cols": 2, "rows": 4 } [/block] In the following example, we register an animation that sets the scale of the component to which it is applied to```[1.0, 0.6, 1.0]```, and sets the opacity of said component to ```1.0```. The animation bounces toward its final value, and lasts for five seconds. [block:code] { "codes": [ { "code": "ViroAnimations.registerAnimations({\n animateImage:{properties:{scaleX:1.0, scaleY:0.6, scaleZ:1.0, \n opacity: 1.0},\n easing:\"Bounce\", \n duration: 5000},\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Applying Animations" } [/block] Once an animation is registered, it needs to be *applied* to the components we wish to animate. To do this, we wrap the component we want to animate in a [```<ViroAnimatedComponent>```](http://docs.viromedia.com/docs/viroanimatedcomponent). [block:code] { "codes": [ { "code": "<ViroAnimatedComponent animation='animateImage' run={true}>\n <ViroImage source={require('./res/myimage.jpg')} position={[0, -1, -2]} scale={[0.1, 0.1, 0.1]} />\n</ViroAnimatedComponent>", "language": "javascript", "name": null } ] } [/block] In the example above, we apply the ```animateImage``` animation (which we registered in the section above) to the ```<ViroImage>```. The ```<ViroImage>``` initially has a scale of ```[0.1, 0.1, 0.1]```. ```animateImage``` will animate this scale to ```[1.0, 0.6, 1.0]``` over 5 seconds. The animation will run immediately after the ```<ViroImage>``` is added to the scene because ```run``` is set to true. If ```run``` were set to false, you could trigger the animation at any time by setting it to true. After a button press, for example. Note that you can apply a single animation to multiple components. The full code for this animation is below. [block:code] { "codes": [ { "code": "'use strict';\n\nimport React, { Component } from 'react';\nimport {\n ViroScene,\n ViroImage,\n ViroAnimations,\n ViroAnimatedComponent,\n} from 'react-viro';\n\nvar AnimationTest = React.createClass({\n render: function() {\n <ViroScene>\n \t\t<ViroAnimatedComponent animation='animateImage' run={true}>\n <ViroImage source={require('./res/myimage.jpg')}\n \t\t\t position={[0, -1, -2]} \t\t\n \t\t\t\t scale={[.1, .1, .1]} />\n </ViroAnimatedComponent>\n </ViroScene>\n }\n});\n\nViroAnimations.registerAnimations({\n animateImage:{properties:{scaleX:1, scaleY:.6, scaleZ:1, opacity: 1}, \n easing:\"Bounce\", duration: 5000},\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Looping and Additive Animations" } [/block] Animations can be looped, and the target properties for an animation can be set in an additive or multiplicative manner. Below is a simple example showing how to loop an animation that adds to the current property of a component. [block:code] { "codes": [ { "code": "var AnimationTest = React.createClass({\n render: function() {\n <ViroScene>\n \t<ViroAnimatedComponent animation='loopRotate' \n \t \t\t\t\t\t\t\t\t\t run={true} loop={true}>\n \t<ViroImage source={require('./res/myimage.jpg')}\n \t position={[0, -1, -2]} \t\t\n \t scale={[.1, .1, .1]} />\n \t </ViroAnimatedComponent> \n </ViroScene>\n }\n});\n\nViroAnimations.registerAnimations({\n loopRotate:{properties:{rotateY:\"+=45\"}, duration:1000},\n});", "language": "javascript" } ] } [/block] The example above rotates an image around the y axis in an infinite loop. The ```rotateY``` property of the ```loopRotate``` animation takes the value ```+=45```. This means it will *add* 45 degrees to the y angle of the component every 1 second. Properties can also be subtracted (-=), multiplied (*=), or divided (/=). [block:api-header] { "type": "basic", "title": "Chaining Animations" } [/block] Suppose you have a series of animations that you wish to run in sequence. For example, you have an animation that moves a component horizontally called ```moveRight```, and an animation that rotates a component called ```rotate```, and you would like to run these one after the other. You can do the following: [block:code] { "codes": [ { "code": "ViroAnimations.registerAnimations({\n moveRight:{properties:{positionX:\"+=0.3\"}, duration: 10000},\n rotate:{properties:{rotateZ:\"+=45\"}, duration:1000},\n rotateAndMovePicture:[\n [\"moveRight\", \"rotate\"],\n ]\n});", "language": "javascript" } ] } [/block] In the example above, we define an *animation chain* called ```rotateAndMovePicture```. It is defined as an array of existing animations. This new animation, when applied, will move the component then rotate it. If you want animations to run *in parallel* instead of in sequence, simply define an animation as multiple animation chains, as demonstrated in the following snippet. ```rotateAndMovePicture```, when applied, will start both chains at the same time: the component will move right and rotate concurrently. [block:code] { "codes": [ { "code": "ViroAnimations.registerAnimations({\n moveRight:{properties:{positionX:\"+=0.3\"}, duration: 10000},\n rotate:{properties:{rotateZ:\"+=45\"}, duration:1000},\n rotateAndMovePicture:[\n [\"moveRight\"],\n [\"rotate\"],\n ]\n});", "language": "javascript" } ] } [/block] Finally, you can also run animation chains, each with multiple sequential steps, concurrently in parallel with one another. The following example makes our component move right, then move back to its original position; while this is happening, the component will also rotate. [block:code] { "codes": [ { "code": "ViroAnimations.registerAnimations({\n\tmoveRight:{properties:{positionX:\"+=0.3\"}, duration: 10000},\n\tmoveLeft:{properties:{positionX:\"-=0.3\", rotateZ:\"+=45\"}, duration: 10000},\n\trotate:{properties:{rotateZ:\"+=45\"}, duration:1000},\n\trotateAndMovePicture:[\n\t\t[\"moveRight\", \"moveLeft\"],\n\t\t[\"rotate\"]\n\t]\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Animation callbacks" } [/block] Animation callbacks can be used to perform an action when an animation starts, or after an animation completes. For example, to respond to the end of an animation, add the desired function to the ```onFinish``` property of the ```<ViroAnimatedComponent>```. Let's look at an example: [block:code] { "codes": [ { "code": "var AnimationOnFinishTest = React.createClass({\n render: function() {\n <ViroScene>\n \t\t<ViroAnimatedComponent animation='animateImage' run={true} \n onFinish={this._onAnimationFinished}\n <ViroImage source={require('./res/myimage.jpg')}\n position={[0, -1, -2]} \t\t\n scale={[0.1, 0.1, 0.1]} />\n </ViroAnimatedComponent>\n </ViroScene>\n },\n \n _onAnimationFinished(){\n console.log(\"Animation has finished!\");\n },\n});\n\nViroAnimations.registerAnimations({\n animateImage:{properties:{scaleX:1, scaleY:.6, scaleZ:1, opacity: 1},\n easing:\"Bounce\", duration: 5000},\n});", "language": "javascript" } ] } [/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.