git 控制暂停播放等操作

实际上 gif 图片是没有 播放暂停等直接操作 api 的

不过可以使用 libgif.js，通过操控 gif 图片的分解组合，来实相同效果。

同时增加了一个倒放按钮，能够倒放 gif 图片 

 

代码记录：

/**
 * 图片 gif 动图，控制（暂停，播放，重播，前一帧后一帧，倒放）
 * 文档：https://www.npmjs.com/package/libgif
 */
export class GifControl {

    constructor() {
        // 添加 input
        this.addTarget();
    }

    /**
     * 添加必要元素
     */
    addTarget() {
        let ele = `
            <script type="text/javascript" src="./assets/js-source/libgif.js"></script>
            <style>
                .gifComponents {
                    margin-top: 30px;
                }
                .imgBox {
                    width: 100%;
                }
                .ButtonBox {
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: flex-start;
                    margin-left: 90px;
                    margin-top: 30px;
                }
                .ButtonBox .itemBox {
                    width: 96px;
                    padding: 0 15px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    white-space: nowrap;
                    cursor: pointer;
                    background: coral;
                    margin-right: 10px;
                    color: #fff;
                }
                .pause:hover, .play:hover, .restart:hover, .restart:hover, .stepForward:hover, .stepBack:hover, .invert:hover{
                    background: rgb(219, 148, 122);
                }
            </style>
            <div class="gifComponents">
                <div class="imgBox">
                  <img
                    id="img"
                    rel:animated_src="./assets/fish.eae52897.gif"
                    rel:auto_play="0"
                    width="467"
                    height="375"
                  />
                </div>
            </div>
            <div class="ButtonBox">
                <div class="itemBox play">Play</div>
                <div class="itemBox pause">Pause</div>
                <div class="itemBox restart">Restart</div>
                <div class="itemBox stepForward">Step forward</div>
                <div class="itemBox stepBack">Step back</div>
                <div class="itemBox invert">Invert</div>
            </div>
        `;
        let body = $('body');
        body.append(ele);

        /**
         * Constructor options
         * gif - Required. The DOM element of an img tag.
         * loop_mode - Optional. Setting this to false will force disable looping of the gif.
         * auto_play - Optional. Same as the rel:auto_play attribute above, this arg overrides the img tag info.
         * max_width - Optional. Scale images over max_width down to max_width. Helpful with mobile.
         * rubbable - Optional. Make it rubbable.
         * on_end - Optional. Add a callback for when the gif reaches the end of a single loop (one iteration). The first argument passed will be the gif HTMLElement.
         * loop_delay - Optional. The amount of time to pause (in ms) after each single loop (iteration).
         * progressbar_height - Optional. The height of the progress bar.
         * progressbar_background_color - Optional. The background color of the progress bar.
         * progressbar_foreground_color - Optional. The foreground color of the progress bar.
         * @type {SuperGif}
         */
        let sup = new SuperGif({
            gif: document.getElementById('img'),
            on_end: () => {
                console.log('end');
            },
        });

        /**
         * loading
         * load( callback ) - Loads the gif specified by the src or rel:animated_src sttributie of the img tag into a canvas element and then calls callback if one is passed
         * load_url( src, callback ) - Loads the gif file specified in the src argument into a canvas element and then calls callback if one is passed
         */
        sup.load();

        // 添加按钮事件
        let arr = ['pause', 'play', 'restart', 'stepForward', 'stepBack', 'invert'];
        let timer = null;
        arr.forEach(item => {
            let temp = document.getElementsByClassName(item)[0];
            temp.addEventListener('click', function () {
                /**
                 * play controls
                 * play - Start playing the gif
                 * pause - Stop playing the gif
                 * move_to(i) - Move to frame i of the gif
                 * move_relative(i) - Move i frames ahead (or behind if i < 0)
                 */
                switch (item) {
                    case 'pause':
                        clearInterval(timer);
                        sup.pause();
                        break;
                    case 'play':
                        clearInterval(timer);
                        sup.play();
                        break;
                    case 'restart':
                        clearInterval(timer);
                        sup.move_to(0);
                        break;
                    case 'stepForward':
                        clearInterval(timer);
                        sup.move_relative(1);
                        break;
                    case 'stepBack':
                        clearInterval(timer);
                        sup.move_relative(-1);
                        break;
                    case 'invert':
                        sup.pause();
                        // 倒放
                        timer = setInterval(() => {
                            /**
                             * getters
                             * get_canvas - The canvas element that the gif is playing in. Handy for assigning event handlers to.
                             * get_playing - Whether or not the gif is currently playing
                             * get_loading - Whether or not the gif has finished loading/parsing
                             * get_auto_play - Whether or not the gif is set to play automatically
                             * get_length - The number of frames in the gif
                             * get_current_frame - The index of the currently displayed frame of the gif
                             */
                            if (sup.get_current_frame() === 0) {
                                // 如果当前播放到了 0 位置，则重置为尾端
                                sup.move_to(sup.get_length() - 1);
                            }
                            sup.move_relative(-1);
                        }, 50);
                        break;
                }
            });
        })
    }
}

 

 

文档： https://www.npmjs.com/package/libgif

参考：https://www.cnblogs.com/volodya/p/14207800.html