react-pump
Canvas based flash like animation library.
Install
npm install react-pump
Animation lyfecycle
...
Usage
At first, import module
-
Pump
: this is Main react component. -
View
: this is animation sprite base class.
import { Pump, View } from 'react-pump'
class RootView extends View {
constructor() {
super()
// you can define any properties for the class
this.points = []
this.on('added',() => {
for(let i=0;i<500;i++) {
this.points.push({
x:Math.random()*this.width,
y:Math.random()*this.height
})
}
})
}
// function will be called in animation loop.
draw() {
// Sprite has { context,canvas,width,height } getters.
let { points } = this
// save style
this.pushStyle()
this.context.strokeStyle = '#000'
this.context.lineWidth = 4
this.context.beginPath()
points.forEach(p=>{
this.context.lineTo(
(Math.random()-0.5)*10+p.x,
(Math.random()-0.5)*10+p.y
)
})
this.context.stroke()
// restore style
this.popStyle()
}
}
react render function.
render() {
return (
<Pump root={RootSprite} framerate={30} width={640} height={480}/>
)
}
Demo
https://yusukeshibata.github.io/react-pump/
License
MIT