手机上H5使用PAGView 和 PAGComposition 想连接播放2个动画中间会闪烁，浏览器不会

[xiewenchong]

【环境】：H5页面,手机上

【问题描述】：页面上有一个banner是正常pag循环播放；此时页面还会触发另外一个单独的全屏弹窗动画，这个动画是由一段一次性动画拼接上后半段循环动画（开奖全屏动画）。使用的是PAGComposition对象去addLayer第一个资源文件，在第一个播放完onAnimationEnd中重新创建一个PAGComposition再addLayer第二个资源并且设置循环，这种方法对吗？ 此时在连接处就大概率会闪烁。但是此时我如果把banner的动画暂停就没有这个问题。 是pag同个页面不支持多个动画同事进行吗？

【询问】H5页面经常会有类似开奖动画的动画，即先播放完一段动画后在最终态会一直循环动画，这种场景能不能只靠一个pag资源完成呢？ 如果不能，那最官方的写法应该使用哪种方式实现？跪求H5简单代码！！！

【大致代码】：
this.startPagFile = await this.getPagFile(PAG, G_OPEN_RED_ENVELOPE_URL)
this.loopPagFile = await this.getPagFile(PAG, G_LOOP_RED_ENVELOPE_URL)

const pagFile1Width = this.startPagFile.width();
const pagFile1Height = this.loopPagFile.height();

this.composition = PAG.PAGComposition.make(pagFile1Width, pagFile1Height);
this.composition.addLayer(this.startPagFile);
this.startPagFile.setStartTime(0);

try {
const startCanvas = this.$refs.canvas
const pagFile1Width = this.startPagFile.width();
const pagFile1Height = this.loopPagFile.height();
this.startPagView = await this.PAG.PAGView.init(this.composition, startCanvas, {
renderingMode: 'WebGL'
});

            this.startPagView.addListener('onAnimationEnd', async () => {
                this.startPagView.removeListener('onAnimationEnd');
                const newComposition = this.PAG.PAGComposition.make(pagFile1Width, pagFile1Height);
                newComposition.addLayer(this.loopPagFile);

                this.loopPagFile.setStartTime(0); // 重置为从 0 开始

                // 重新初始化 PAGView
                this.startPagView = await this.PAG.PAGView.init(newComposition, startCanvas, {
                    renderingMode: 'WebGL'
                });

                // // 设置循环播放
                this.startPagView.setRepeatCount(0);
                await this.startPagView.play();
            })
        }

[kevingpqi123]

不需要那么麻烦，pag 支持组合模式，可以将多个 pag 文件拼接起来，且支持设置单个 pag 文件的起始时间，看下这个帖子
#2138

[xiewenchong]

因为我是前端，pag资源是设计给的我不确定他们给的有没有问题，能不能帮忙用这两个文件验证下，我已经是用PAGComposition的addLayer去组合两个资源了

[0x1306a94]

你试试整体播放完成后 onAnimationEnd， 重新进度，大概就是 setProgress(firstPagFile.duration() / this.pagView.duration())
这样应该就是始终重复播放第二个

[kevingpqi123]

就是上面的这种实现方式，pag 资源需要关注的是首帧和尾帧不能有空白帧，pag 的 API 接口支持原子 pag 文件的任意组合
还有一种方式是， 如果不想在监听回调中做处理，将第二个 pag 文件添加的足够多也可以解决问题

[kevingpqi123]

关于切换 pag 文件闪烁，这在预期之内，对于 pag 渲染而言，首帧渲染涉及到渲染环境的处理化、缓存的初始化，首帧渲染耗时是最高的，切换的时候有可能会出现闪烁，采用组合模式实现，渲染环境不需要重新构建，且异步渲染加载的机制都可以正常使用起来

[xiewenchong]

就是上面的这种实现方式，pag 资源需要关注的是首帧和尾帧不能有空白帧，pag 的 API 接口支持原子 pag 文件的任意组合 还有一种方式是， 如果不想在监听回调中做处理，将第二个 pag 文件添加的足够多也可以解决问题

你能帮我确认这2个资源吗，设计说是正常没有空白帧，但是我运行起来就是有问题，而且我用了你们官方的demo跑也是有闪烁问题.