当前位置：首页 > news >正文

GIFPlayer 使用指南：创建可调速的 GIF 播放器

news 2025/7/15 2:19:08

今天我要分享一个功能全面的 JavaScript GIF 播放器类 - GIFPlayer，它支持播放控制、速度调整和自适应尺寸等功能

核心功能

基本播放控制
- 播放/暂停切换
- 自动播放选项
- 帧精确控制
速度调节
- 0.5倍到8倍可调速度
- 加速(×2)/减速(÷2)快捷方法
- 速度变化回调通知
智能尺寸处理
- 自动使用 GIF 原始尺寸
- 支持自定义宽高
- 动态调整画布大小

使用示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex {display: flex;}canvas {width: 200px;height: 200px;border-style: dashed;}.column {flex-direction: column;}</style>
</head><body><div class="flex"><input type="file" id="file"><div class="flex column"><canvas id="myCanvas"></canvas><div><button id="btn">暂停</button><button id="speedDownBtn">减速(÷2)</button><span id="speedDisplay">1.0x</span><button id="speedUpBtn">加速(×2)</button></div></div></div>
</body>
<script src="./demo.js"></script>
<script>const player = new GIFPlayer({canvas: document.getElementById('myCanvas'),autoplay: false});document.getElementById('file').addEventListener('change', async function (e) {player.loadFile(e.target.files[0]);document.getElementById('btn').innerHTML = player.playing ? '暂停' : '播放';})document.getElementById('btn').addEventListener('click', () => {player.toggle()document.getElementById('btn').innerHTML = player.playing ? '暂停' : '播放';});// 加速到2倍document.getElementById('speedUpBtn').addEventListener('click', () => {const currentRate = player.speedUp();console.log(`当前速度: ${currentRate}倍`);});// 减速到0.5倍document.getElementById('speedDownBtn').addEventListener('click', () => {const currentRate = player.speedDown();console.log(`当前速度: ${currentRate}倍`);});// 监听速度变化player.onRateChange = (rate) => {document.getElementById('speedDisplay').textContent = `${rate.toFixed(1)}x`;};
</script></html>

class GIFPlayer {constructor(options) {if (!options.canvas) {this.canvas = document.createElement('canvas');this.canvas.id = 'gif-player-canvas';document.body.appendChild(this.canvas);} else {this.canvas = options.canvas;}this.width = options.width;this.height = options.height;this.autoplay = options.autoplay !== false; // 默认自动播放this.frameIndex = 0; // 当前帧索引this.animationId = null; // 动画IDthis.playing = false; // 播放状态this.imageDecoder = null;// 新增播放速度控制this.playbackRate = options.playbackRate || 1; // 默认1倍速this.minRate = options.minRate || 0.5;  // 最低0.5倍this.maxRate = options.maxRate || 8;    // 最高4倍this.rateStep = options.rateStep || 2; // 步长2this.onRateChange = options.onRateChange || null;this.initCanvas();}initCanvas(width = this.width, height = this.height) {this.canvas.width = width;this.canvas.height = height;this.ctx = this.canvas.getContext('2d');}async _renderFrame(frameIndex) {const result = await this.imageDecoder.decode({ frameIndex });// Initialize canvas sizeif (!this.width && !this.height) {await this.initCanvas(result.image.displayWidth, result.image.displayHeight);}this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);this.ctx.drawImage(result.image, 0, 0, this.canvas.width, this.canvas.height);return result;}async loadFile(file) {try {const arrayBuffer = await file.arrayBuffer();this.imageDecoder = new ImageDecoder({data: arrayBuffer,type: file.type || 'image/gif'});await this._renderFrame(this.frameIndex);if (this.autoplay) {await this.play();}} catch (error) {console.error('加载失败:', error);}}async play() {if (!this.imageDecoder) return;if (this.playing) this.stop();this.playing = true;const renderAnimationFrame = async () => {const result = await this._renderFrame(this.frameIndex);this.frameIndex = (this.frameIndex + 1) %this.imageDecoder.tracks.selectedTrack.frameCount;const duration = result.image.duration / 1000 / this.playbackRate;this.animationId = setTimeout(renderAnimationFrame,duration);};renderAnimationFrame();}stop() {clearTimeout(this.animationId);this.playing = false;}toggle() {this.playing ? this.stop() : this.play();}speedUp() {const newRate = this.playbackRate * this.rateStep;this.setPlaybackRate(newRate);return this.playbackRate;}speedDown() {const newRate = this.playbackRate / this.rateStep;this.setPlaybackRate(newRate);return this.playbackRate;}setPlaybackRate(rate) {const oldRate = this.playbackRate;this.playbackRate = Math.max(this.minRate, Math.min(this.maxRate, rate));if (this.playbackRate !== oldRate && this.onRateChange) {this.onRateChange(this.playbackRate);}if (this.playing) {this.stop();this.play();}return this.playbackRate;}
}if (typeof module !== 'undefined' && module.exports) {module.exports = GIFPlayer;
} else {window.GIFPlayer = GIFPlayer;
}

gif-palyer