🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

rn-sprite is a react native component for creating animations from spritesheets for IOS and Android devices.

Animation React Native

Documentation

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


You May Also Like