{"__v":0,"_id":"58f7a4c8cbd001190056cc0c","category":{"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","_id":"58f7a4c8cbd001190056cbfe","__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,"project":"578c4badbd223d2000cc1441","user":"57bb7defafc18c0e00529cf1","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-10-18T17:30:37.995Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"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](http://viro.readme.io/docs/animation) for more information on animation.\n\n######Example use:\n```\n<ViroAnimatedComponent\n    animation=\"rotateAroundYAxis\"\n    delay={1000}\n    loop={true}\n    onStart={this._onStart}\n    onFinish={this._onFinish}\n    run={true}>\n    \n   <Viro3DObject source={require('./res/skeleton.obj')}\n                           position={[-0.0, -5.5, -1.15]}\n                           materials={[\"skeleton\"]} />\n</ViroAnimatedComponent>\n```\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Props\"\n}\n[/block]\n##Optional Props\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**animation**\",\n    \"1-0\": \"**delay**\",\n    \"6-0\": \"**rotation**\",\n    \"7-0\": \"**style**\",\n    \"8-0\": \"**text**\",\n    \"9-0\": \"**transformBehaviors**\",\n    \"11-0\": \"**visible**\",\n    \"10-0\": \"**width**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**PropTypes.string**\\n\\nPut the PropType Description here.\",\n    \"1-1\": \"**PropTypes.number**\\n\\nThe delay in milliseconds to apply before executing the specified animation.\",\n    \"6-1\": \"PropTypes.arrayOf(PropTypes.number)\\n\\nPut the PropType Description here.\",\n    \"7-1\": \"stylePropType\",\n    \"8-1\": \"PropTypes.string\\n\\nPut the PropType Description here.\",\n    \"9-1\": \"PropTypes.arrayOf(PropTypes.string)\\n\\nPut the PropType Description here.\",\n    \"10-1\": \"PropTypes.number\\n\\nPut the PropType Description here.\",\n    \"11-1\": \"PropTypes.bool\\n\\nPut the PropType Description here.\",\n    \"2-0\": \"**loop**\",\n    \"3-0\": \"**onFinish**\",\n    \"5-0\": \"**run**\",\n    \"2-1\": \"**PropTypes.bool**\\n\\nTrue if the animation should loop. Set to false by default.\",\n    \"3-1\": \"**React.PropTypes.func**\\n\\nCallback invoked when the animation has finished. If loop is set to true, this is invoked every time the animation loops.\",\n    \"5-1\": \"**PropTypes.bool**\\n\\nSet to true to start the animation. If you set to false, this will pause the animation. The default value is true.\",\n    \"4-0\": \"**onStart**\",\n    \"4-1\": \"**React.PropTypes.func**\\n\\nCallback invoked when the animation has started. If loop is set to true, this is invoked every time the animation loops.\"\n  },\n  \"cols\": 2,\n  \"rows\": 6\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Methods\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"start()\",\n    \"0-0\": \"Start the animation that is specified in the ```animation``` prop of the ```ViroAnimatedComponent```.\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"stop()\",\n    \"0-0\": \"Stop the current animation being applied by the ```ViroAnimatedComponent```.\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]","excerpt":"","slug":"viroanimatedcomponent","type":"basic","title":"ViroAnimatedComponent"}

ViroAnimatedComponent


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](http://viro.readme.io/docs/animation) 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> ``` [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Optional Props [block:parameters] { "data": { "0-0": "**animation**", "1-0": "**delay**", "6-0": "**rotation**", "7-0": "**style**", "8-0": "**text**", "9-0": "**transformBehaviors**", "11-0": "**visible**", "10-0": "**width**", "h-0": "PropKey", "h-1": "PropType", "0-1": "**PropTypes.string**\n\nPut the PropType Description here.", "1-1": "**PropTypes.number**\n\nThe delay in milliseconds to apply before executing the specified animation.", "6-1": "PropTypes.arrayOf(PropTypes.number)\n\nPut the PropType Description here.", "7-1": "stylePropType", "8-1": "PropTypes.string\n\nPut the PropType Description here.", "9-1": "PropTypes.arrayOf(PropTypes.string)\n\nPut the PropType Description here.", "10-1": "PropTypes.number\n\nPut the PropType Description here.", "11-1": "PropTypes.bool\n\nPut the PropType Description here.", "2-0": "**loop**", "3-0": "**onFinish**", "5-0": "**run**", "2-1": "**PropTypes.bool**\n\nTrue if the animation should loop. Set to false by default.", "3-1": "**React.PropTypes.func**\n\nCallback invoked when the animation has finished. If loop is set to true, this is invoked every time the animation loops.", "5-1": "**PropTypes.bool**\n\nSet to true to start the animation. If you set to false, this will pause the animation. The default value is true.", "4-0": "**onStart**", "4-1": "**React.PropTypes.func**\n\nCallback invoked when the animation has started. If loop is set to true, this is invoked every time the animation loops." }, "cols": 2, "rows": 6 } [/block] [block:api-header] { "type": "basic", "title": "Methods" } [/block] [block:parameters] { "data": { "h-0": "start()", "0-0": "Start the animation that is specified in the ```animation``` prop of the ```ViroAnimatedComponent```." }, "cols": 1, "rows": 1 } [/block] [block:parameters] { "data": { "h-0": "stop()", "0-0": "Stop the current animation being applied by the ```ViroAnimatedComponent```." }, "cols": 1, "rows": 1 } [/block]