{"_id":"5a06037134873d0010b39216","category":{"_id":"5a06037134873d0010b39204","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":5,"slug":"api-reference","title":"API Reference"},"parentDoc":null,"user":"579fce4e1435850e00dfbbbb","project":"578c4badbd223d2000cc1441","version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-24T20:35:22.440Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"The ```ViroAnimations``` class is used to create reusable animations that are applied to a ViroReact component. For more information on how animations work, please read our [Animation Guide](doc:animation).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Methods\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"static  registerAnimations(animations:{[key:string]: any})\",\n    \"0-0\": \"Takes a dictionary object that is a set of key/value pairs. The key being a string representing the animation name. The value being either a list of properties that conforms ```ViroAnimationProps``` or an array that represents a chained animation.\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"ViroReact Animation Props\"\n}\n[/block]\n##Required props\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-0\": \"**duration**\",\n    \"1-0\": \"**properties**\",\n    \"2-0\": \"**easing**\",\n    \"3-0\": \"**properties**\",\n    \"0-1\": \"**ReactPropTypes.number**\\n\\nThe length of the animation in milliseconds. 1000 milliseconds = 1 second\",\n    \"1-1\": \"**ReactPropTypes.shape**\\n\\nA list of properties that represent the **final** value of the object when the animation completes. On animation start the current value of the components property value will be the start value and will animate to the final value specified here. \\n\\nList of animatable properties:\\n\\n|Name|Description|\\n|:-------------------|:---------------|\\n|opacity|Opacity of an object. A value of 0 is fully transparent. Anything >= 0 is a range of partially transparency, becoming more opaque when approaching 1 and fully opaque when equal to 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|translateX|Change position of object on x-axis.|\\n|translateY|Change position of object on y-axis.|\\n|translateZ|Change position of object on z-axis.|\\n|color|The color of the light. The default light color is white.|\\n|material| Material that was created via ViroMaterials.createMaterials() with properties (like diffuseColor) that we wish to animate toward.|\\n\\nAccepted values for ```scale```, ```translate```, ```position``` and ```rotate``` properties can be a string or number.\\n\\nValid color formats are:\\n\\n  * '#f0f' (#rgb)\\n  * '#f0fc' (#rgba)\\n  * '#ff00ff' (#rrggbb)\\n  * '#ff00ff00' (#rrggbbaa)\\n  * 'rgb(255, 255, 255)'\\n  * 'rgba(255, 255, 255, 1.0)'\\n  * 'hsl(360, 100%, 100%)'\\n  * 'hsla(360, 100%, 100%, 1.0)'\\n  * 'transparent'\\n  * 'red'\\n  * 0xff00ff00 (0xrrggbbaa)\\n\\nAccepted values for ```scale```, ```translate```, ```position``` and ```rotate``` properties can be a string or number.\\n\\n**Specifying additive values**\\nIf you wish to do additive animations, a string value represents the amount to add to the property during the animation. Example: ```rotateX:\\\"+45\\\"```.\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n##Optional props\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-0\": \"**delay**\",\n    \"0-1\": \"**ReactPropTypes.number**\\n\\nThe amount to delay the animation when started, specified in milliseconds. Default is 0.\",\n    \"1-0\": \"**easing**\",\n    \"1-1\": \"**ReactPropTypes.string**\\n\\nThe 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  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]","excerpt":"","slug":"viroanimations","type":"basic","title":"ViroAnimations"}
The ```ViroAnimations``` class is used to create reusable animations that are applied to a ViroReact component. For more information on how animations work, please read our [Animation Guide](doc:animation). [block:api-header] { "type": "basic", "title": "Methods" } [/block] [block:parameters] { "data": { "h-0": "static registerAnimations(animations:{[key:string]: any})", "0-0": "Takes a dictionary object that is a set of key/value pairs. The key being a string representing the animation name. The value being either a list of properties that conforms ```ViroAnimationProps``` or an array that represents a chained animation." }, "cols": 1, "rows": 1 } [/block] [block:api-header] { "type": "basic", "title": "ViroReact Animation Props" } [/block] ##Required props [block:parameters] { "data": { "h-0": "PropKey", "h-1": "PropType", "0-0": "**duration**", "1-0": "**properties**", "2-0": "**easing**", "3-0": "**properties**", "0-1": "**ReactPropTypes.number**\n\nThe length of the animation in milliseconds. 1000 milliseconds = 1 second", "1-1": "**ReactPropTypes.shape**\n\nA list of properties that represent the **final** value of the object when the animation completes. On animation start the current value of the components property value will be the start value and will animate to the final value specified here. \n\nList of animatable properties:\n\n|Name|Description|\n|:-------------------|:---------------|\n|opacity|Opacity of an object. A value of 0 is fully transparent. Anything >= 0 is a range of partially transparency, becoming more opaque when approaching 1 and fully opaque when equal to 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|translateX|Change position of object on x-axis.|\n|translateY|Change position of object on y-axis.|\n|translateZ|Change position of object on z-axis.|\n|color|The color of the light. The default light color is white.|\n|material| Material that was created via ViroMaterials.createMaterials() with properties (like diffuseColor) that we wish to animate toward.|\n\nAccepted values for ```scale```, ```translate```, ```position``` and ```rotate``` properties can be a string or number.\n\nValid color formats are:\n\n * '#f0f' (#rgb)\n * '#f0fc' (#rgba)\n * '#ff00ff' (#rrggbb)\n * '#ff00ff00' (#rrggbbaa)\n * 'rgb(255, 255, 255)'\n * 'rgba(255, 255, 255, 1.0)'\n * 'hsl(360, 100%, 100%)'\n * 'hsla(360, 100%, 100%, 1.0)'\n * 'transparent'\n * 'red'\n * 0xff00ff00 (0xrrggbbaa)\n\nAccepted values for ```scale```, ```translate```, ```position``` and ```rotate``` properties can be a string or number.\n\n**Specifying additive values**\nIf you wish to do additive animations, a string value represents the amount to add to the property during the animation. Example: ```rotateX:\"+45\"```." }, "cols": 2, "rows": 2 } [/block] ##Optional props [block:parameters] { "data": { "h-0": "PropKey", "h-1": "PropType", "0-0": "**delay**", "0-1": "**ReactPropTypes.number**\n\nThe amount to delay the animation when started, specified in milliseconds. Default is 0.", "1-0": "**easing**", "1-1": "**ReactPropTypes.string**\n\nThe 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" }, "cols": 2, "rows": 2 } [/block]