rn-sprite
rn-sprite is a react native component for creating animations from spritesheets for IOS and Android devices
...Spritesheets? ...Animations?
A sprite is a single graphic image that is incorporated into a larger scene so that it appears to be part of the scene. When you put many sprites into a single image, you get a spritesheet like this and this. The process of changing images in quick succession to give the illusion of movement is called animation.
Code:
<Sprite sequence={[ 0.04, 0.125, 0.20815, 0.2913, 0.37445, 0.4576, 0.54075, 0.6239, 0.70705, 0.7902, 0.87335, 0.9565, 0.04, ]} move="vertical" loop fps={10} isPlaying source="https://github.com/adhbh/rn-sprite/raw/master/vertical.jpg" width={windowWidth} height={windowHeight / 2} onTouchStart={() => true} onTouchMove={() => true} onTouchEnd={() => true} />- Depends on gl-react-native
- Works on IOS and Android
- Supports horizontal, vertical and grid spritesheets
- Play/Pause support
- Configurable animation speed
- Touch responsive
props
| prop | type | description | required |
|---|---|---|---|
| source | string | Url of spritesheet image | yes |
| sequence | array | Array of numbers between 0 and 1 that define the sequence of animation, or, in the case of a sprite grid, an array of pairs of numbers between 0 and 1 | yes |
| loop | boolean | Repeat the animation when it completes (Default: true) | no |
| fps | integer | Frames per second (Default: 2) | no |
| isPlaying | boolean | Play/Pause the animation (Default: true) | no |
| move | string | For horizontal or vertical spritesheets (Default: horizontal) | no |
| onTouchStart | function | Function which is called when sprite is touched | no |
| onTouchMove | function | Function which is called while the user touches and moves the finger on the sprite | no |
| onTouchEnd | function | Function which is called when touch event gets completed | no |
Usage
- Animations in mobile games
- Replacement for
gifs - 360-View
Installation
- Setup
RNGLPackageby following this guide for Android and IOS npm install --save rn-sprite
Todo
- Configurable repeat count for animation
- Rewind support
- Got some more ideas? Feel free to raise a PR
License
MIT
