spriteframe

基于canvas好用的雪碧图帧动画库

⭐️ 特性

• 支持ES6+或TypeScript编写源码，编译生成生产代码
• 多环境支持（支持浏览器原生，支持AMD，CMD，支持Webpack，Rollup，fis等，支持Node）
• 集成jsmini

注意: 如果不同时使用 export 与 export default 可打开 legacy模式，legacy模式 下的模块系统可以兼容 ie6-8，见rollup配置文件

💊 兼容性

单元测试保证支持如下环境：

| IE | CH | FF | SF | OP | IOS | Android | Node | | --- | ---- | ---- | --- | ---- | ----- | ------- | ---- | | 11+ | 100+ | 100+ | 16+ | 100+ | 10.3+ | 4.1+ | 14+ |

注意：编译代码依赖ES5环境，对于ie6-8需要引入es5-shim才可以兼容，可以查看demo/demo-global.html中的例子

📂 目录介绍

.
├── demo 使用demo
├── dist 编译产出代码
├── doc 项目文档
├── src 源代码目录
├── test 单元测试
├── CHANGELOG.md 变更日志
└── TODO.md 计划功能

🚀 使用者指南

通过npm下载安装代码

$ npm install --save sprite-frame-animation

如果你是webpack等环境

import SpriteFrame from 'sprite-frame-animation';
let s1 = SpriteFrame({
  container: document.querySelector('#container'),
  name: "staticAniPerson", //动画名称
  orient: 'left-right',//关键帧图片的排列方式
  width: 40,//单个帧宽度
  height: 40,//单个帧高度
  img: "./spritesheet.png",//一个动画的完整序列帧url
  firstImg: "./spritesheet.png",//首次加载展位图片url，如何完整的序列帧图片较大，可以用这个
  totalKeyNum: 6,//总帧数据
  count: 0,//完整动画播放次数,0表示无限循环
  duration: 1000,//总帧数据
  delay: 1000,//延时多久开始
  autoplay: true,//自动播放
  interval: 0,//间隔多久播放下一轮动画
})
s1.on('end', function () {})

如果你是浏览器环境

<script src="node_modules/sprite-frame-animation/dist/index.aio.js"></script>

📑 文档

API

😘 贡献者指南

首次运行需要先安装依赖

$ npm install

一键打包生成生产代码

$ npm run build

运行单元测试:

$ npm test

注意：浏览器环境需要手动测试，位于 test/browser

修改 package.json 中的版本号，修改 README.md 中的版本号，修改 CHANGELOG.md，然后发布新版

$ npm run release

将新版本发布到npm

$ npm publish

贡献者列表

contributors

⚙️ 更新日志

CHANGELOG.md

✈️ 计划列表

TODO.md