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