React KeyframeAnimation
npm install react-component-keyframe-animation --save
import KeyframeAnimation from 'react-component-keyframe-animation'
export default class XX extends Component{
render(){
return (
<KeyframeAnimation
name='test'
frames={['1.png','2.png','3.png']}></KeyframeAnimation>
);
}
}
设置关键帧动画的名字
设置关键帧序列,此方式是以单张图片按照横向或者是纵向连续排列,数据结构如下:
{
source: String.isRequired,
direction: String, // ['row', 'column'] 'row' as default
frameCount: Number.isRequired //
}
设置关键帧的帧序列
是否进行预加载.当组件第一次render完成之后将预加载图片资源
是否自动播放.如果设置了预加载,之后再预加载完成之后才会执行,否则立即执行
动画开始时的事件监听
动画结束时的事件监听
动画迭代完一次时的事件监听
样式设置
开始播放动画
停止播放动画
// 当资源预加载完成之后会进行自动播放
<KeyframeAnimation
name='test'
frames={['1.png','2.png','3.png']}></KeyframeAnimation>
<KeyframeAnimation
sprite={{
source:require('./sprite1.jpg'),
frameCount:8
}}
name="test-sprite1"/>
<KeyframeAnimation
sprite={{
source:require('./sprite2.jpg'),
frameCount:8,
direction:'column'
}}
name="test-sprite2"/>