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
RNGLPackage
by 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