rn-sprite is a react native component for creating animations from spritesheets for IOS and Android devices
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
| 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 |
- Animations in mobile games
- Replacement for
gifs - 360-View
- Setup
RNGLPackageby following this guide for Android and IOS npm install --save rn-sprite
- Configurable repeat count for animation
- Rewind support
- Got some more ideas? Feel free to raise a PR
MIT