先上代码。
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>
3 个回复
c***@foxmail.com (作者)
UNIAPP运行的结果 。框起来的是播放的用的时间
微信小程序运行的结果
c***@foxmail.com (作者)
svgaplayer.weapp.js插件库是相同的
c***@foxmail.com (作者)
管理员能看下回复下不。。