{"_id":"@asp2131/rn-anime-sprite","_rev":"2-62a57e99622f41c97230519a71e3398a","name":"@asp2131/rn-anime-sprite","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@asp2131/rn-anime-sprite","version":"1.0.0","description":"The React Native Animated Sprite package is a feature rich declaritive component for animation, tweening, and dragging sprites.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/asp2131/rn-anime-sprite.git"},"keywords":["react-native","react","mobile","android","ios","games","animation","tween"],"author":{"name":"Akintunde Pounds"},"license":"MIT","dependencies":{"random-string":"^0.1.2","react-addons-shallow-compare":"^15.5.2","prop-types":"^15.5.10"},"bugs":{"url":"https://github.com/asp2131/rn-anime-sprite/issues"},"homepage":"https://github.com/asp2131/rn-anime-sprite#readme","gitHead":"96d072d9e3b2a840ad7c1d939ffbc2fdbef5f73b","_id":"@asp2131/rn-anime-sprite@1.0.0","_nodeVersion":"19.2.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-kbhyVrUCgeypcM8j21+8YPEMdZfwShr+N+KhbSm+Er6iYuAdsvocqoh1kHYtyNelfm8BaQOMe+C3aX6xOKGGeg==","shasum":"bb740a3944fd9e7ed98c22d3340399284a879ed6","tarball":"https://registry.npmjs.org/@asp2131/rn-anime-sprite/-/rn-anime-sprite-1.0.0.tgz","fileCount":6,"unpackedSize":42664,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxAt6779QHF1pVtVsL9ZKQ568B3tLPDfdwACgztb33xQIgX+2/mSxINmxKrH5keo8N5uWzY/TwG/OVNoIbsidf9Og="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqzXiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDzA//cQO/isZgU3qkaYTKmrlwVuq7WpsFOOalbVOqCAdPnqcbvtIJ\r\nivYqYLKyqmJmackS9+5iDERMtgDAJa7+W34sJwXg53bZHg2cuSP+O5+h03ai\r\nFa2GfgfrWnqRqAbZJzoi4Uw57QXh288YlPB1BUQ46J0gR8a8/ZehwJqHVSIB\r\njoEcUjuaZjaiCgGI2GFzDRkZUrqn5elOYTZ8tnxjnqL2RR/g087g9HyR/k69\r\n7bmTHFzFHkBUU7L9kn7tpN+DRJRe9rbotOC/gF390jHf/2AJ33si3AbbSkzP\r\n5OT5mjHb4S+A/DTDysHOEhKQ4G7Nho9LvxMH5KlV+8tdonni6XCk/v1ilmFn\r\nD4a3NrJcxD0C1c4dk4grsO17YgiTFIOUF5E/8vA+sxnC+nEqJv/IxYYXO3ST\r\nPydiX7DQ1LEcqFu5RvYa3o7VD4Qav3HglNAuY55cuCtgCh2rLucbcUjpThSN\r\nkV8FKOGMdbf72SpvfJjdOhNgC01Ggn+foVCf14AgcJoQs2P9jgDKtjXdwgPN\r\nF1NdN2hOhkGnSCSPEJPXONF3KbllUdQjcssRip7XudwnbnzoUdwjZBRRxSVz\r\nQWbqm1EAkxjclGSpJkT9w1D2o9HepplGZssHZsMxRapYvjnk681xNTKbDeqP\r\nicGag+dIBYvETT5pX+A7zq6g8jIdRzN7t+g=\r\n=xQ6c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asp2131","email":"akinpds@gmail.com"},"directories":{},"maintainers":[{"name":"asp2131","email":"akinpds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-anime-sprite_1.0.0_1672164834530_0.2257958698723339"},"_hasShrinkwrap":false},"1.0.1":{"name":"@asp2131/rn-anime-sprite","version":"1.0.1","description":"The React Native Animated Sprite package is a feature rich declaritive component for animation, tweening, and dragging sprites.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/asp2131/rn-anime-sprite.git"},"keywords":["react-native","react","mobile","android","ios","games","animation","tween"],"author":{"name":"Akintunde Pounds"},"license":"MIT","dependencies":{"@asp2131/rn-anime-sprite":"^1.0.0","prop-types":"^15.5.10","random-string":"^0.1.2","react-addons-shallow-compare":"^15.5.2"},"bugs":{"url":"https://github.com/asp2131/rn-anime-sprite/issues"},"homepage":"https://github.com/asp2131/rn-anime-sprite#readme","gitHead":"96d072d9e3b2a840ad7c1d939ffbc2fdbef5f73b","_id":"@asp2131/rn-anime-sprite@1.0.1","_nodeVersion":"19.2.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-6BqIej29jsnczHsHldGh/8qRdWqVh79nTp/NnGHFfnUyAE219Ov4SVs/kznZoDfpwRFz2dlu/pcXA/GLNZuP7Q==","shasum":"6fd839a64a08cdeebb373c780e5d5f36fc99ec27","tarball":"https://registry.npmjs.org/@asp2131/rn-anime-sprite/-/rn-anime-sprite-1.0.1.tgz","fileCount":6,"unpackedSize":42807,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVv6crl7Olkmn6l1G4kthptmsUjs5UdgNSvASuy2vf/gIhAP2u0vSerFU6rpl9cIVh7w+V5pzAPfwU04lWfQ+6AxGo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjs2CLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Zw//SA7G0CsRK9SWmlxm2bibQcW8p4JTcWuzjQ6sT/69NkbgaHUm\r\ncBW+gQ3ADSA1onF3prgVw5e8xk0LXMJitQWSDuJMw04BAHwCI02W9QOdldtc\r\nDWJOcyva4CfOO6c/TsRaQ2aaxKxO2PMDfzL9ywYA1SL9bV45Z7sbsnonMcou\r\n47jnprqsOnDCbVcbkZ6LRCpK7B8r7zSsVKzvsF4PQFi2mQhWxW0XUX8qm6yL\r\nV191W/5Qk0ihSYSfEGJtkn3ZseAGlzh18w0F3UjcCAPTH+RrkJGdhlOKGJs8\r\nXU2oevlKD7Ib1bG2YLCn00sMr9FaY7oC2A4fZ7WG9TVC3GQf9oVbFHNkGx0k\r\n9IGkWCFXa7Kpkkm9dQ3fzu3nCw+0mLVnMb3yiKzW9iNIG3SkQBx5WU94ScSB\r\nXtwwKLWxm/fO+8mnzaSdLKvFBR5cJW9T0UQPFv5a13teO0nrkKZsavJfj1+l\r\nHxCVbQmvn3unjXsNQHg7nOlpnIsOPKcAxzBUbI7X7nqpAjSIEfg/IYQXxzjc\r\n4rTXyc6XgNTwsiI9ZvgiJFbdSLpWT5ye45EiIhCCIUS+VqGQMHhjjGuwk7Gu\r\ncX5qZuqJTsjsi4MF9RE/SQ5DFzdKKM8mgRHs3DGJfZV+iCMbhLW1uaMKxmXa\r\nG1KT1qmhfFYmHQ+5EU15F3Fc+KTftnIEwjE=\r\n=oopl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asp2131","email":"akinpds@gmail.com"},"directories":{},"maintainers":[{"name":"asp2131","email":"akinpds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-anime-sprite_1.0.1_1672700043350_0.1533842745289109"},"_hasShrinkwrap":false},"1.0.2":{"name":"@asp2131/rn-anime-sprite","version":"1.0.2","description":"The React Native Animated Sprite package is a feature rich declaritive component for animation, tweening, and dragging sprites.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/asp2131/rn-anime-sprite.git"},"keywords":["react-native","react","mobile","android","ios","games","animation","tween"],"author":{"name":"Akintunde Pounds"},"license":"MIT","dependencies":{"@asp2131/rn-anime-sprite":"^1.0.0","prop-types":"^15.5.10","random-string":"^0.1.2","react-addons-shallow-compare":"^15.5.2"},"bugs":{"url":"https://github.com/asp2131/rn-anime-sprite/issues"},"homepage":"https://github.com/asp2131/rn-anime-sprite#readme","gitHead":"96d072d9e3b2a840ad7c1d939ffbc2fdbef5f73b","_id":"@asp2131/rn-anime-sprite@1.0.2","_nodeVersion":"19.2.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Qfx0hPA7M1ClgrNmfECeZMgeGSAEgh4masYQDRIfAQUtYLdw+mWofaSOjLso2MHjygjtaSOcUPwvDjaVZOZf3Q==","shasum":"981e5a45a39e0940fdca6e32f6249e36b483934f","tarball":"https://registry.npmjs.org/@asp2131/rn-anime-sprite/-/rn-anime-sprite-1.0.2.tgz","fileCount":6,"unpackedSize":42823,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBDX5GSx0i5WyGnKbaO7olPkoTriPXtMTlR1VdxfoS8wIhAPyQijO1Y3CWIVqbe2hOc8pEeuNqMv5UEPU9kluLF/JE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjs2IEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEPw//UUgvrU1GOfywogi2VXHCdQ7SN5p765NGzN5fNyrAWhiym15C\r\nhFMS/8nNFkowmF9vrBtN8VKb6PEayn7HTk1Q8q6BARrHxicgKRIS8EzpJfvE\r\nvmBar6L1taaJ5NlJ78fWxCmVFHBxPailZjDrUWoHjkmoAVnv8evGi7mepz3n\r\nH2WzSpy91/lRYe2OyYSy1zOpkneiFpzXasLGSw8jXq6Z784FNPB6IgxXSJ1j\r\nECHVMTeojgPbd+IcqdBiu95VJmxPLxit2C0liSCDPYMjWzq0WSn+pKYtmucs\r\nqV1In+Uj1FFkCA1So+cFnsMhcFBkPhGLamdNadE4LDIGPvvtglDUx682s8do\r\n8EvsBu8Gd8mkHmFnsi/QY5Yn3XGJLNPnqbmanJ8hBDNBjMNfdfLrdUKN3amJ\r\nqEVB4u+FslR2CzVuQuYvu+B1mPWQWYyFIb+XXVBAJ2M2YA7sV82Mz7dSCYWw\r\nXA2gSQmU/Zt7RUF9QbrDGl/+YNqdNgGu2npBksBB7KTTNGtsS6zlbQ0iUV9G\r\n8nRPmXHSoDdCYqp4Vv5roeAVjsu78YSsk62UFhOPet74AWcn6S5Io9i1IiYK\r\nSZ/VjKDYaH+Fu55awCX6YKxwhu2YAXTZ8ueGS6m7LrrZLKWu3uN1TF1zEJs7\r\nKaRlYHXtz171e0kHmw4fSf/LUcZ/YE1KjsQ=\r\n=9F90\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asp2131","email":"akinpds@gmail.com"},"directories":{},"maintainers":[{"name":"asp2131","email":"akinpds@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-anime-sprite_1.0.2_1672700420567_0.6938101566380885"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-27T18:13:54.458Z","1.0.0":"2022-12-27T18:13:54.709Z","modified":"2023-01-02T23:00:20.901Z","1.0.1":"2023-01-02T22:54:03.554Z","1.0.2":"2023-01-02T23:00:20.780Z"},"maintainers":[{"name":"asp2131","email":"akinpds@gmail.com"}],"description":"The React Native Animated Sprite package is a feature rich declaritive component for animation, tweening, and dragging sprites.","homepage":"https://github.com/asp2131/rn-anime-sprite#readme","keywords":["react-native","react","mobile","android","ios","games","animation","tween"],"repository":{"type":"git","url":"git+https://github.com/asp2131/rn-anime-sprite.git"},"author":{"name":"Akintunde Pounds"},"bugs":{"url":"https://github.com/asp2131/rn-anime-sprite/issues"},"license":"MIT","readme":"# The React Native Animated Sprite\n\nreact-native-animated-sprite (RNAS) package is a feature rich declarative component for animation, tweening, and dragging sprites. Animation is achieved using frame-by-frame animation, tweening uses the React Native Animated class, and dragging uses React Native PanResponder.\n\nRNAS is ideal for use in general applications or games. Development has been driven by [Curious Learning's](http://www.curiouslearning.org/) work in cognitive assessment and literacy.\n\n## Installation\n```\n$ npm install --save react-native-animated-sprite\n```\n\n## Overview\nThere are three key features to RNAS: AnimatedSprite, sprites, and tweens.\nTogether these three features provide the full capabilities of RNAS.\n\n### AnimatedSprite\nAnimatedSprite is the primary component interface which would be included in a\nReact Native application.\n\n### Sprites\nSprites are objects that are required by AnimatedSprite. A sprite object contains\nreferences to the images used for frame-by-frame animation and other related\ninformation. See \"example/sprites/monster/monsterSprite.js\"\n\n### Tweens\nTweens (\"src/Tweens/Tweens.js\") operate on AnimatedSprites to enable tweening.\n\n### Example Use\n<img src=\"https://raw.githubusercontent.com/micahrye/react-native-animated-sprite/master/example/AnimateSpriteExample.gif\" width=\"265\" height=\"400\">\n\n## Example Projects\n**coming soon**\n\nAdd yours :D\n\n## Example Declaration\nThis is the declaration used for the example application included in this projects\nGithub [repo](https://github.com/micahrye/react-native-animated-sprite/blob/master/example/app/index.android.js), and demonstrated in the GIF above.\n\n```\n<AnimatedSprite\n  ref={'monsterRef'}\n  sprite={monsterSprite}\n  animationFrameIndex={monsterSprite.animationIndex(this.state.animationType)}\n  loopAnimation={true}\n  coordinates={{\n    top: 100,\n    left: 100,\n  }}\n  size={{\n    width: monsterSprite.size.width * 1.65,\n    height: monsterSprite.size.height * 1.65,\n  }}\n  draggable={true}\n  tweenOptions = {this.state.tweenOptions}\n  tweenStart={'fromMethod'}\n  onPress={() => {this.onPress();}}\n/>\n```\nThe above example would create an \"AnimatedSprite\" with the \"monsterSprite.\" The animation loops and is set to an animation type of the sprite. The coordinates place the start location of the AnimatedSprite, while size declares the size. Draggable set to true (draggable={true}) means that the AnimatedSprite can be dragged. The tween options are\nset to a tween object, and the tween can be started 'fromCode', i.e. programmatically.\nThere is also an \"onPress\" handler declared that is used to switch animation type.\nSee [the code](https://github.com/micahrye/react-native-animated-sprite/blob/master/example/app/index.android.js) for full details.\n\n## Component Properties (need to finish)\n\n| Name | Required | Type |  Description | Default Value |\n|------|----------|------|-------------|---------------|\n| sprite | true | object | An object that describes the underlying sprite asset. | See [Sprite fields](#sprite-fields) below. |\n| coordinates | true | object | The top/left coordinates of the AnimatedSprite. | none |\n| size | true | object | The width/height size of the sprite assets. | none |\n| animationFrameIndex | true | array | The indices of the current animation. | none |\n| rotate | false | array | Rotation information for sprite. | [{rotateY: '0deg'}] |\n| opacity | false | number | Opacity of sprite. | 1 |\n| spriteUID | false | string | Unique string used for ID purposes. | randome string of length 7 |\n| draggable | false | bool | Set draggable state of sprite. | false |\n| onPress | false | func | Function handle for press (touch) event. | none |\n| onPressIn | false | func | Function handle for pressIn event. | none |\n| onPressOut | false | func | Function handle for pressOut event. | none |\n| loopAnimation | false | bool | Indicates if animation should loop | none |\n| timeSinceMounted | false | func | Indicates time since component was mounted | none |\n| currentLocation | false | func | Function to retrieve current coordinates. | none |\n| tweenStart | false | string | Indicates how tween should start, one of ['fromMethod', 'fromPress', 'fromMount'] | none |\n| tweenOptions | false | object | Describes tween options. | See [Tweens](#tweens-overview) |\n| stopAutoTweenOnPressIn | false | bool | Indicates if tween started at component mount should stop on press event. | none |\n| onTweenStopped | false | func | Function handle called when tween stopped by press event. | none |\n| onTweenFinish | false | func | Function handle called when tween completes full tween. | none |\n| onAnimationFinish | false | func | Function handle called when animation comes to end. | none |\n| visible | false | bool | Indicates if sprite is visible. | true |\n| fps | false | number | Indicates the number of frames per second. | 10 |\n\n## Use of Refs to Access AnimatedSprite Methods\nWhile \"refs\" should be avoided in most cases they can be useful. As Facebook [states](https://facebook.github.io/react/docs/refs-and-the-dom.html),\n\"there are a few cases where you need to imperatively modify a child outside of the typical dataflow.\" One of those cases is triggering imperative animations.\n\nThere are several methods of AnimatedSprite that you will want to access via refs.\nThe are:\n  * **startTween**: Allows for programatic starting a tween.\n  * **getCoordinates**: Gets the current position ([top, left]) coordinates for an AnimatedSprite.\n\nThe following is an example of usage. Suppose you had the following AnimatedSprite component:\n```\n<AnimatedSprite\n  sprite={monsterSprite}\n  ref={'monsterRef'}\n  ...\n/>\n```\nThen in your declaring application you would be able to access the AnimatedSprite\nreferences as follows (See [example app](https://github.com/micahrye/react-native-animated-sprite/blob/master/example/app/index.android.js)):\n```\nthis.refs.monsterRef.startTween();\n// or\nconst coords = this.refs.monsterRef.getCoordinates();\n```\n\n## Sprites & Tweens Overview\nSprites and tweens are key aspects of the AnimatedSprite component. The following\ngives an overview of each.\n\n### Sprites Overview\nA sprite is an object that contain with the following shape:\n```\n{\n  name: <string>,\n  size: <object>,\n  animationTypes: <array>,\n  frames: <array>,\n  animationIndex: <function>,\n}\n```\nSee [example app](https://github.com/micahrye/react-native-animated-sprite/blob/master/example/sprites/monster/monsterSprite.js) for working example.\n\n#### Sprite Fields\n  * **name**: A string representing the name of the sprite\n  * **size**: An object containing the width and height of the individual image frames, e.g. {width: 220, height: 220}. Note that all image frames should be the same size.\n  * **animationTypes**: An array of animation types for the sprite, e.g. ['WALK', 'JUMP'] would\n  indicate that the sprite has a walk and jump animation.\n  * **frames**: An array of image require statements. React Native loads images through\n  require.\n  * **animationIndex**: Is a function that should return the array indices from \"frames\" for\n  a given animation type defined in \"animationTypes\".\n\n### Tweens Overview\nTweens.js contains many tween objects that can be used by AnimatedSprite for creating\ntweening effects. Tweens.js defines \"high\" level tweens, such as \"zoomIntoExistence\"\nand \"wiggle,\" which can be used by AnimatedSprite. AnimatedSprite can take \"tweenOptions,\"\nwhich define the tween. For example:\n```\n{\n  tweenType: 'sine-wave',\n  startXY: [coords.left, coords.top],\n  xTo: [sample(location), sample(location)],\n  yTo: [sample(location), sample(location)],\n  duration: 1000,\n  loop: false,\n}\n```\nDefines a tween of type \"sine-wave\" that starts at \"startXY\" and has \"x, y\" coordinates\nthat change over time. \"xTo\" and \"yTo\" are arrays that indicate where a AnimatedSprite\ncoordinate will tween too. Duration indicates the total duration of the tween, and\nloop indicates if the tween will loop (true) or be only happen once (false).\n\n## Notes on Usage\nMobile operating systems such as Android and iOS have significantly less application memory then other systems. As a result performance can be effected by the size and number of images used by an application using AnimatedSprite.\n\nFor performance reasons changes in AnimatedSprite dimensions must maintain the\naspect ratio of the underlying image media.\n","readmeFilename":"README.md"}