fengweijp / rn-sprite

rn-sprite is a react native component for creating animations from spritesheets

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 both horizontal and vertical 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	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
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