@zaqmjuop/libgif 介绍和 示例

这是libgif-js 的一个分支，该项目被实现为一个用来在浏览器端对 GIF 进行解码和操纵动画的脚本组件。

如果你喜欢它，请给它一个 Star！

添加了一些变化

• 优化了播放控制逻辑，添加了控制播放速率、播放方向、循环播放的功能
• 优化了解码逻辑，解码耗时降低了一倍以上
• 增加了内存缓存池，现在对同一地址的图片不会再重复请求或重复解码
• 增加了自动适应元素宽高的能力

用法示例

安装

npm i @zaqmjuop/libgif

在页面里放置一个画布容器

<canvas id="myGif" />

初始化控制器示例

import libgif from '@zaqmjuop/libgif'

const controls = libgif({
  gif: document.getElementById('myGif'),
  src: 'https://img95.699pic.com/photo/40165/2060.gif_wh860.gif'
})

API 说明

构造函数选项

• gif: HTMLCanvasElement[必要] 呈现动画的画布容器
• src: string[可选] 初始化后自动播放的图片地址
• forword: boolean[可选] 播放方向，默认值是 true，即正序播放
• rate: number[可选] 播放速率，默认值是 1，即 1 倍速率
• loop: boolean[可选]循环播放，默认值是 true，即循环播放

控制器属性

• playing: boolean[只读] 是否播放中
• loopCount: number[只读] 循环播放次数
• currentKey: string[只读] 当前播放的文件地址
• currentFrameNo: number[只读] 当前播放帧的次序
• rate: number 播放速率
• forward: boolean 播放方向
• loop: boolean 是否循环播放

控制器方法

• play(): void 播放动画
• pause(): void 暂停动画
• jumpTo(No: number): void 跳转到指定次序，No 是指定帧的次序
• loadUrl(key: string): void 加载新的 GIF 文件，key 是 GIF 文件地址
• getDecodeData(key: string): DecodedData 获取 GIF 的解码信息，key 是已缓存的 GIF 文件地址
• getDownload(key: string): DownloadRecord 获取 GIF 的文件内容，key 是已缓存的 GIF 文件地址
• on(type: string, callback): void 监听事件
• off(type: string, callback): void 卸载事件监听

控制器事件

• play 从暂停到播放时触发
• frameChange 播放次序改变时触发
• pause 从播放到暂停时触发
• playended 最后一帧播放完触发
• decoded 有 GIF 文件解码完成时触发
• downloaded 有 GIF 文件下载完成时触发
• progress 有 GIF 文件下载时触发

注意事项

GIF 文件必须和您正在加载的页面位于同一域上。 因为该库的工作原理是通过 Ajax 请求 GIF 图像数据，解码 GIF 文件并获取帧信息，并将它们呈现在 canvas 元素上。