使用方式

npm install easyfa --save
# or
yarn add easyfa

import React, { Component } from 'react'
import Easyfa from 'easyfa'
import apng1 from '../images/apng1.png'

class App extends Component {
  render () {
    return <Easyfa src={apng1} />
  }
}

属性

| 属性 | 描述 | 类型 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | | src | 图片地址（目前只支持动图apng和静态png），直接引入或者使用网络地址（canvas绘制图片会有跨域问题，非同源图片需设置CORS）。 | array|string | | showStatic | 静态模式，以img标签展示动图中的某一帧，如果本身就是静图则直接展示,（目前是不可逆操作，无法通过修改src变回动图模式，除了changeLayer其他实例方法失效）。 | array|number | | rate | 播放速率默认值为1，数值增大播放速度加快，数值减少播放速度减慢，数值必须大于0 | number | | style | 外层盒子样式 | object | | canvasStyle | 内层canvas元素样式 | object | | className | 外层盒子样式类名 | string | | canvasClassName | 内层canvas样式类名 | string | | autoPlay | 图片加载后是否自动播放（循环播放），默认false | boolean | | cache | 根据图片地址缓存到window.apngCache下，不重复再重复请求图片，默认false | boolean | | autoPlayTimes | 自动播放次数，不传为循环播放 | number |

PS.改变src会解析加载动图并刷新，此方法切换图片会出现闪烁，可通过src传入数组，并通changeLayer方法切换指定图层来实现。

showStatic详细参数说明：支持数字和数字数组，数字或长度为1的数组表示所有图层应用同一序号的帧，多个数字则和图层对应，分别展示不同的序号的真。1表示第一帧，依次类推，-1表示倒数第一帧，依次类推，绝对值超出数组长度按第一帧处理。

回调属性

| 属性 | 描述 | | ----------- | ------------------------------------------ | | onLoad | 图片加载解析成功动画可以播放时回调 | | onEnd | 动画播放结束时回调 | | onLoopStart | 循环播放动画每次动画播放开始第一帧时会调 | | onLoopEnd | 循环播放动画每次动画播放结束最后一帧时会调 |

实例方法

通过ref 拿到Easyfa组件实例调用

| 方法 | 描述 | 参数 | | ----------- | --------------------------------------- | ------------------------------------------------------------------------ | | play | 播放动画 | 可传入一个数字控制播放次数，不传为循环播放 | | one | 播放一次动画，相当于play(1) | - | | pause | 暂停动画（停在当前帧） | - | | stop | 停止动画（重回第一帧） | - | | end | 此次循环播完后停止（停在最后一帧） | - | | changeLayer | 当src传入为数组时，此方法可显示指定图层 | 传入一个数字，显示数组中对应的图层（对应数组坐标），无加载闪烁。 |

TODO

• [x] demo页面
• [ ] 代码注释完善
• [ ] 单元测试
• [ ] 展示指定帧数页面
• [ ] gif动图支持