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

h5进行svga动画礼物特效播放的代码实现队列按顺序播放

article 2024/9/22 23:29:25

需求描述：

在直播场景中，有很多的礼物特效动画，如采用Svga动画的播放方案，则会遇到以下问题；

1.svga文件的预加载，

2.动画的顺序播放队列。即前一个动画播放完了，才会播放下一个动画。

1.svga文件的预加载，又分两种情况，

a)全部文件预先加载，到时候播放直接调用就行，但这样刚开始的时候会占用大量带宽。

b)按需加载，即在播放某个动画的时候，第一次进行加载，以后就不需要进行加载了，但第一次会有一些卡顿，可以增加一个loading的动画来改善用户体验。

2.动画的顺序播放

每当有用户赠送礼物的时候，我们会将这个动画放入动画播放队列尾部，等待其前一个动画播放完成后，再播放这个动画。防止动画交叉播放。等待上一个动画播放完成的一个重点事件是onPercentage和onFinished函数。我们用的是onPercentage函数，即播放进度。

因为我们是按顺序播放的，即是从播放队列中的第一个开始播放，所以，动画播放队列第一个播放完成后，即可删除第一个元素。然后第二个就变成了第一个，这样播放阶列越来越少。节省资源。

另外，文件缓存单独放一个队列，即svga文件缓存队列。

完整的代码如下

/**
 * Created with 快兔科技 老李.
 * User: 手机模板网
 * Date: 2023/12/3
 * Time: 15:20
 * sjmoban.com
 *  QQ： 79089679
 */
//播放队列有几个方法
var dl = {
    stData: {//状态参数
        isLoading: 0,
        playing: 0,
        dhIndex: -1
    },
    filelist: [],//文件列表，因为有一些文件是重复的，所以这个存放文件即可，
    //{filepath:"",loaded:0}//文件路径，是否加载了。
    clearData: function () {
        var that = this;
        that.dhlist = [];
        that.stData.isLoading = 0;
        that.stData.playing = 0;
    },
    fn_fileIndex: function (filepath) {
        var that = this;
        for (var i in that.filelist) {
            if (that.filelist[i].filepath == filepath) {
                return i;
            }
        }
        return -1;
    },
    addFile: function (svgaPath) {
        var that = this;
        //先看看文件在不在。
        var file_init = 0;
        var file_loaded = 0;
        var file_index = -1;
        for (var i in that.filelist) {
            if (that.filelist[i].filepath == svgaPath) {//即在里面，将其加载状态也带上
                file_init = 1;
                file_index = i;//得到当前的
                file_loaded = parseInt(that.filelist[i].loaded);
            }
        }
        //如果文件不在里面
        if (!file_init) {//即文件不在里面，加到里面，
            that.filelist.push({filepath: svgaPath, loaded: 0, videoItem: {}});//不在里面
            file_index = that.filelist.length - 1;//得到文件的索引值
        }
        //预加载加进来的这个文件
        if (!that.filelist[file_init].loaded) {//即没加载，则需要加载这个文件
            that.parser.load(svgaPath, function (videoItem) {//先检查这个文件是否loaded过，这样的话，就可以直接loaded了
                var fi = that.fn_fileIndex(svgaPath);
                if (fi >= 0) {
                    that.filelist[fi].videoItem = videoItem;
                    that.filelist[fi].loaded = 1;
                }
            });
        }
        var index = -1;
        var ta = {
            fileIndex: file_index,
            filepath: svgaPath,
            played: 0,
            loaded: 0,
            index: -1
        };
        //预加载这个文件，然后将loaded设置为1，才能正常播放，否则会播放不流畅
        that.dhlist.push(ta);//增加过后，也要把这个,返回索引值
        return {fileIndex: file_index, dhIndex: that.dhlist.length - 1};
    },
    init: function (options) {//初始化数据
        var that = this;
        that.player = options.player || 0;
        that.parser = options.parser || 0;
        that.player.onFinished = function () {//这个不是播放完成执行的函数
            console.info("finished!");
        };
        that.clearData();
        that.player.loops = 1;
        that.player.clearsAfterStop = true;
        that.player.onFrame(function (res) {//帧数
            // console.info(res);
        });
        that.player.onPercentage(function (res) {//播放进度
            // console.info(res);
            if(res==1){//播放完了，则删除这个动画
                console.info(that.stData.dhIndex);
                that.dhlist.splice(that.stData.dhIndex,1);
                that.play();//继续播放
            }
        });
    },
    getFirstLoaded: function () {
        var that = this;
        for (var i in that.dhlist) {
            if (that.filelist[that.dhlist[i].fileIndex].loaded == 1) {//即文件已经加载了
                return {fileIndex: that.dhlist[i].fileIndex, dhIndex: i, file: that.filelist[that.dhlist[i].fileIndex]};
            }
        }
        return {fileIndex: -1, dhIndex: -1, file: {}, dh: {}};
    },
    preload: function () {//预加载

    },
    dhlist: [],
    push: function () {//向尾部追加

    },
    pop: function () {//从头部

    },
    play_01: function () {//不是按顺序播放
        var that = this;
        if(that.dhlist.length==0){
            return false;
        }
        var fo = that.getFirstLoaded();//得到第一个加载的。不一定是按顺序播放的，如果要是按顺序放的，则只播放第0个就可以了，然后删除第0个
        // console.info(fo);
        if (fo.fileIndex < 0) {//即没有，则调用自身//但需要延时调用自身
            setTimeout(function () {
                console.info(fo);
                that.play();///则调用自身
            }, 1000);
        } else {//播放，
            //
            console.info(fo);
            that.player.clearsAfterStop = true;
            that.stData.dhIndex = parseInt(fo.dhIndex);
            that.player.setVideoItem(fo.file.videoItem);
            that.player.startAnimation();
        }

    },
    play: function () {//按顺序播放，则一定要等到第一个加载完成，播放完就删除
        var that = this;
        if(that.dhlist.length==0){
            return false;
        }
        // console.info(fo);
        if (that.filelist[that.dhlist[0].fileIndex].loaded !=1) {//即没加载，则一直尝试着
            setTimeout(function () {
                that.play();///则调用自身
            }, 1000);
        } else {//播放，
            //
            that.player.clearsAfterStop = true;
            that.stData.dhIndex=0;//始终播放第一个
            that.player.setVideoItem(that.filelist[that.dhlist[0].fileIndex].videoItem);
            that.player.startAnimation();
        }

    },
    del: function () {

    }
};

调用代码如下图