知乎上的 GIF 动图，在PC 端默认是暂停的，不会自动播放，大致的效果就是下面这个样子。
你一定很想知道图片里面的人是谁对不对，哈哈哈。动图是1994 年拍的「笑林小子」这部电影里面的片段，主演之一就是徐若瑄，因为这部电影是台湾电影，所以我们大陆的同胞知道徐若瑄大致就是通过这部片子，但是我可不是通过「笑林小子」了解她的，「笑林小子」都是后来看的，最先看的她的电影，是天使三部曲第一部「赤裸天使」，当时看的时候，我年龄还小三观都还没有形成，这部电影给我看的挺受伤的，电影里面表现的东西和我当时那点脑容量里面的东西是大大的不同。不过三部曲也就第一部好看点，剩下两部，还是算了吧。
今天看博客的时候，发现有个博客的博主（日本人）也喜欢徐若瑄，特此截图：
https://jp-nightlife.com/profile
注意上面的一句话：其實她還拍過裸體寫真呢。无论是看书看文章还是看照片一定的看仔细了。相关写真内容请自行百度，下面是我认为最好看的一张写真。
唯一遗憾的是这张图片和上面的那张都不是电影里面的截图
跑题结束。
回到正题，知乎的那个效果，你审查元素看下源代码就知道他其实用的是 gifplayer 这个第三方插件。我们就用下，来试试效果。
gifplayer 配合 jQuery 使用要求：
- 需要有 jquery.js，jquery.gifplayer.js 和 gifplayer.css，在 gifplayer dist 文件里面都能找到。
- 其次需要准备一张静态图和一个 gif 动图，静态图最好是从 GIF 动图的第一帧，使用 wps 打开 GIF ，就能保存动图的任意一帧为图片，然后把静态图片和动图取相同的名字放在同级目录下，注意动图的后缀为 gif。
- 调用.gifplayer（）方法获取所需图像。
来看使用源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./gifplayer.css">
<style>
.gifplayer{
width: 100px;
}
</style>
</head>
<body>
<img class="gifplayer" src="./vivian.jpg" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./jquery.gifplayer.js"></script>
<script>
$('.gifplayer').gifplayer();
</script>
</body>
</html>
动图演示：
默认情况下，图片上显示的文字是
GIF ，如果想要自定义可以这么设置：
$('.gifplayer').gifplayer({ label: 'play' });
你是不是也感觉图片上显示的圆有点大，看着不好看，这就得去改我们引入的 css 样式表了，调到你看着合适。
这个效果还凑合。但是没有知乎的好看，原因是知乎上面的那个图片是自己放的 svg 。要想达到如此高度的自定义只能自己写了。
那我们就自己写，但我告诉你要写你自己写。我的技能当然是 ctrl + c 然后 ctrl + v 了。
源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 150px;
}
</style>
</head>
<body>
<p><input type="button" id="btn" value="停止"></p>
<img src="./vivian.gif" alt="">
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image = document.getElementsByTagName("img")[0];
button = document.getElementById("btn");
if (image && button) {
button.onclick = function() {
if (this.value == '停止') {
image.stop();
this.value = '播放';
} else {
image.play();
this.value = '停止';
}
};
}
</script>
</body>
</html>
现在只需要把按钮给布局到动图的中央，换上去一个图片轻轻松松就能达到知乎动图播放暂停的效果了。操作 gif 很明显还没有想操作 video 标签似的能够做到操作素材的每一帧，所有文章标题准确点应为（暂停=》停止）：
前端如何控制GIF的播放和停止
在工作中，我遇到的可没这么难，其中一个场景就是鼠标移上图片播放 gif，鼠标没有移动到图片上就是一个静态图片。这个就简单只需要简单的操作下 DOM 元素就行了。就类似：
img.src="animate.gif";
// 或者呈现的是
img.src="static.png";
但是浏览器有个很神奇的功能，照理说 gif 图片在浏览器里面会一直播放，结果我在操作 DOM 把图片由原来的静图给替换成动图，死活 gif 就执行了一次。多一次都不执行，恰好和产品要求的一样真是天助我也。效果如下：
这个动图不知道存多久了，就等写文章的时候用上
最后放个别人的博客：https://github.com/sunseekers
参考来源：小tips: CSS或JS实现gif动态图片的停止与播放
2020年1月18日19:05:59
网友评论