Nosy Pinocchio Manners

    react-pump

    1.0.7 • Public • Published

    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

    Keywords

    none

    Install

    npm i react-pump

    DownloadsWeekly Downloads

    14

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • yusukeshibata