背景
在一次需求中，产品需要在页面中展示一个动图效果。心里直接习惯性的让设计将图片做成gif格式,然后才发现，gif格式的图片在一张图中最颜色数不能超过256，所以在需求特效图片上拥有极其丰富的色彩的情况下，gif格式的图片方案显然不行了。
于是决定动手亲自实现这个效果且用以后期复用，由于图片色彩较多，所以就只能将特效动画图片切成几十张连续的图片，然后通过代码实现动画切换，以达到最终效果。
实现方案
- css 使用
animation 实现图片切换 - js 使用
setInterval 实现图片切换 - canvas 使用
canvas实现图片切换
方案优劣对比
| 角度 | CSS | JS | CANVAS |
|---|
| 性能 | 优 | 低 | 优 |
| 拓展性 | 低 | 优 | 优 |
| 难易程度 | 低 | 中 | 高 |
最终方案
命令行工具
facode 1.x版本
1
2
3
| npm install facode -g
fa mode=canvas type=jpg speed=100
|
命令行参数
| 参数名 | 取值 | 默认值 | 说明 |
|---|
| mode | String | ‘js’ | 帧动画实现方式, 取值范围 ‘js’,’css’,’canvas’ |
| speed | int | 200 | 逐帧动画间隔时长 |
| type | string | ‘png’ | 要合成的图片格式 |
| path | string | ’./’ | 输入图片路径 |
| out | string | ’./’ | 输出代码文件路径 |
| loading | Boolean | true | 是否需要展示loading, 仅支持js和canvas |
| minify | Boolean | true | 是否压缩生成的文件 |
浏览器运行环境
facode 2.x版本
1
2
3
4
5
| npm install facode@2.0.0
import FaCode from 'facode'
new Facode(options)
|
options
| 参数名 | 取值 | 默认值 | 说明 |
|---|
| id | String | null | 帧动画盒子ID |
| imgList | Array | [] | 图片网络资源地址集合 |
| mode | String | ‘js’ | 帧动画实现方式, 取值范围 ‘js’,’css’,’canvas’ |
| speed | int | 200 | 逐帧动画间隔时长 |
| loading | Boolean | true | 是否需要展示loading |
| loadingFn | Function | null | 自定义生成loading动画 |
