react-native-particles: New particle system for react native
source link: https://www.tuicool.com/articles/hit/yQFRF3R
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-native-particles
Declarative particle system for react native. Works on iOS and Android. It uses Animated
api and useNativeDriver:true
to archieve 60 FPS particles animation
Add it to your project
npm install react-native-particles --save import { Emitter } from 'react-native-particles'
Demo
Basic usage
import { Emitter } from 'react-native-particles'; const App = React.createClass({ render() { return ( <Emitter numberOfParticles={50} emissionRate={5} interval={200} particleLife={1500} direction={-90} spread={360} fromPosition={{ x: 200, y: 200 }} > <Text>Particle</Text> </Emitter> ); } });
Examples
Props
Emitter
Basically, the children
of emmiter is clonned and transformed into a particle.
-
numberOfParticles
(number) - The total of particles to be emitted -
interval
(number) - Interval between emitting a new bunch of particles -
fromPosition
(VectorType | (() => VectorType)) - The position from where the particles should be generated -
emissionRate
(number) - Number of particles to be be emitted on each cycle -
particleLife
(number) - The particle life time (ms) -
direction
(number) - The direction angle of the particle (in degrees) -
spread
(number) - The spread angle where particles are allowed to be rendered (in degrees) -
speed
(number) - The speed of each particle -
gravity
(number) - Gravity force to be applied to the particle movement -
segments
(number) - number of steps the animation will be divided ( more segments == more precise animation == slow performance) -
width
(number) - Width of the emitter area -
height
(number) - Height of the emitter area -
autoStart
(boolean) - Start emitting particles right after initialization -
style
(Object) - Style of the container view -
children
(ReactElement) - Particle content
Contribution
Issuesare welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.
Pull requestsare welcome. If you want to change API or making something big better to create issue and discuss it first. Before submiting PR please run prettier
.
MIT Licensed
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK