1.1.1 • Published 5 years ago
基于react的apng动图组件, 将apng解析，通过canvas播放。
install
npm install --save apng-react
use
import Apng from 'apng-react';
import image from './a.png';
function App() {
return <Apng src={image} />
}
props
| prop | description | type |
|---|
| src | 图片资源地址 | string、string[] |
| rate | 播放速率（默认值为1，按动图资源的间隔播放，值越小速度越快，必须大于0）（与time互斥，优先级低于time） | number |
| time | 规定完整播放一遍动画的时间（秒）（与rate互斥，优先级高与rate） | number |
| autoPlay | 是否自动播放(只播一次)，默认false | boolean |
| autoPlayLoop | 是否自动播放(循环播放)， 默认false | boolean |
| cache | 是否缓存(到组件被卸载) TODO | boolean |
| cacheGlobal | 是否缓存(直到窗口关闭) TODO | boolean |
event
| 事件 | 描述 |
|---|
| ref | 返回dom节点 |
| onRefs | 返回关联对象，用于调用内部方法 |
| onLoad | 图片资源加载完成回调 |
| onLoopEnd | 每次播放到最后一帧回调 |
| onFirstLoopEnd | 首次播放到最后一帧回调 |
| onEnd | 动画停止时回调 |
function
通过onRefs拿到的实例对象下的方法
| 方法 | 描述 | 参数 |
|---|
| play | 播放动画 | index: number类型，播放次数。默认播放一次，0为循环播放 |
| stop | 停止播放 | isSmooth: boolean类型，是否平滑停止,默认false。- true: 当前资源渲染到最后一帧后再停止并停留在最后一帧，触发onEnd回调。 - false: 立即清除动画，触发onEnd回调 |
| change | 当src属性为array时，调用此方法可切换动图播放 | (index：number, isSmooth: boolean)index：值为src索引下标。isSmooth：是否在当前资源渲染到最后一帧后再切换,默认false。- true: 会自动调用play方法，播放的次数是调用play时传递的参数。如果不想自动调用play，请使用stop方法。- false: 只渲染切换的动图的第一帧图 |
| pause | 暂停播放 | - |