Rn-sprite NPM | npm.io

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 = { true }
  fps = { 10 }
  isPlaying = { true }
  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