c***@foxmail.com
c***@foxmail.com
  • 发布:2023-04-21 00:02
  • 更新:2023-04-22 11:12
  • 阅读:251

关于小程序中播放SVGA的疑问,同样的代码SVGA解析时间比直接用小程序多了一倍的时间

分类:uni-app

先上代码。
UNIAPP端:

<template>  
    <view class="container">  
        <button @click="play" type="primary" style="width: 300px">播放</button>  

        <canvas id="demoCanvas" type="2d" style="width: 300px; height: 300px; background-color: black"></canvas>  
    </view>  
</template>  

<script>  
    const {  
        Parser,  
        Player  
    } = require("@/static/js/svgaplayer.weapp.js");  

    export default {  
        data() {  
            return {  
                player: null,  
            }  
        },  
        onLoad() {},  
        methods: {  
            async play() {  
                try {  
                    const startTime = new Date().getTime();  
                    console.log('start:', startTime)  

                    let hasPlay = 0;  
                    const parser = new Parser();  
                    const player = new Player;  
                    player.loops = 1;  
                    await player.setCanvas('#demoCanvas')  
                    const videoItem = await parser.load(  
                        "https://cdn.iamyezhu.com/svga/%E5%8A%A0%E7%89%B9%E6%9E%97.svga");  
                    await player.setVideoItem(videoItem);  
                    player.startAnimation();  
                    player.onFinished(() => {  
                        // console.log('onfinish');  
                    })  
                    player.onPercentage((percent) => {  
                        if (hasPlay == 0) {  
                            const overTime = new Date().getTime();  
                            console.log('over:', overTime)  
                            console.log('diff:', overTime - startTime)  
                            hasPlay = 1;  
                        }  
                        // console.log('onPercentage')  
                    })  
                } catch (error) {  
                    console.log(error);  
                }  
            },  
        }  
    }  
</script>  

<style>  
</style>

微信小程序码:

const { Parser, Player } = require("../../libs/svgaplayer.weapp")  
Page({  
  data: {  
  },  
   onLoad() {  
  },  
  async play() {  
    try {  
      const startTime = new Date().getTime();  
      console.log('start:',startTime)  

      let hasPlay = 0;  
      const parser = new Parser();  
      const player = new Player;  
      player.loops = 1;  
      await player.setCanvas('#demoCanvas')  
      const videoItem = await parser.load("https://cdn.iamyezhu.com/svga/%E5%8A%A0%E7%89%B9%E6%9E%97.svga");  
      await player.setVideoItem(videoItem);  
      player.startAnimation();  
      player.onFinished(() => {  
        console.log('onfinish');  
      })  
      player.onPercentage((percent) => {  
        if(hasPlay == 0){  
          const overTime = new Date().getTime();  
          console.log('over:',overTime)  
          console.log('diff:',overTime-startTime)  
          hasPlay = 1;  
        }  
        console.log('onPercentage')  
      })  
    } catch (error) {  
      console.log(error);  
    }  
  },  
})  

<!--index.wxml-->  
<view class="container">  
  <button bindtap="play" type="primary" style="width: 300px">播放</button>  

  <canvas id="demoCanvas" type="2d" style="width: 300px; height: 300px; background-color: black"></canvas>  
</view>  
2023-04-21 00:02 负责人:无 分享
已邀请:
c***@foxmail.com

c***@foxmail.com (作者)

UNIAPP运行的结果 。框起来的是播放的用的时间

微信小程序运行的结果

c***@foxmail.com

c***@foxmail.com (作者)

svgaplayer.weapp.js插件库是相同的

c***@foxmail.com

c***@foxmail.com (作者)

管理员能看下回复下不。。

该问题目前已经被锁定, 无法添加新回复