前端如何控制GIF的播放和暂停

2020-01-18 本文已影响0人 CondorHero

知乎上的 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

前端如何控制GIF的播放和暂停

猜你喜欢

热点阅读