react-keyframe(demo)

Play Frame Animation in react

Install

npm install --save react-keyframe

Usage

import React, { Component } from 'react'

import Keyframe from 'react-keyframe'

class Example extends Component {
  render () {
    const config = {
      source: 'static/source.png',
      size: [100, 150],
      list: {
        fly: [0, 46, true]
      },
      rate: 50
    }
    return (
      <Keyframe config={config} />
      <button onClick={() => {window.keyframe.play('fly')}}>fly</button>
    )
  }
}

Props

Name	Description	Defalt	Type
config	配置信息	{}	objecct
style	自定义画布样式	{}	object

Config

const config = {
  source: 'static/source.png',
  size: [100, 150],
  list: {
    fly: [0, 10, true]
  },
  rate: 50
}

Keyframe 组件会注册一个全局方法window.Keyframe.play() ，使用方法传入list中注册过的动作名称就可以播放指定的动画片段

window.keyframe.play('fly')

Name	Description	Defalut	Type
source	PNG 序列的源文件	'static/source.png'	string
size	PNG 序列的尺寸 [width,height]	[100,100,false]	array
list	动作列表 [起始帧，结束帧，是否循环]	{action1:[0,10],action2:[11,20],true}	array
rate	帧速率 (ms)	50	number

list:{action1:[0,10],action2:[11,20,true]: 指定动作1的帧数是0到第10帧，动作2的帧数是11到20帧且循环播放。

Demo

查看 React-keyframe，了解具体的使用方法

Update

0.0.2

• 修复已知错误

License

MIT © browniu