0.0.2 • Published 6 years ago

react-keyframe v0.0.2

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

react-keyframe(demo)

Play Frame Animation in react

NPM JavaScript Style Guide

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

NameDescriptionDefaltType
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')
NameDescriptionDefalutType
sourcePNG 序列的源文件'static/source.png'string
sizePNG 序列的尺寸 width,height100,100,falsearray
list动作列表 起始帧,结束帧,是否循环{action1:0,10,action2:11,20,true}array
rate帧速率 (ms)50number

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

Demo

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

npm.io

Update

0.0.2

  • 修复已知错误

License

MIT © browniu