<template>
<view>
<view id="giftCanvas"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<script module="svga" lang="renderjs">
import SVGA from '../../util/svga.min.js'
export default {
mounted() {
// if (typeof window.SVGA === 'function') {
// this.initSVGA()
// } else {
// // 动态引入较大类库避免影响页面展示
// const script = document.createElement('script')
// // view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
// script.src = '../../util/svga.min.js'
// // script.onload = this.initEcharts.bind(this)
// document.head.appendChild(script)
// }
this.initSVGA()
},
methods: {
initSVGA(newValue, oldValue, ownerInstance, instance) {
console.log(newValue);
let player = new SVGA.Player('#giftCanvas');
let parser = new SVGA.Parser('#giftCanvas');
parser.load('https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga', (videoItem) => {
player.loops = 1 // 设置循环播放次数是1
player.setVideoItem(videoItem);
player.startAnimation();
// 动画结束事件回调
// player.onFinished(() => {
// player.clear()
// ownerInstance.callMethod('clearAudio')
// ownerInstance.callMethod('hide')
// })
})
}
}
}
</script>
<style lang="scss" scoped>
#giftCanvas {
width: 100%;
height: 600rpx;
margin: auto;
}
</style>
- 发布:2021-09-06 17:54
- 更新:2023-02-24 15:40
- 阅读:730
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows Feature Experience Pack 120.2212.3530.0
HBuilderX类型: 正式
HBuilderX版本号: 3.1.13
浏览器平台: Chrome
浏览器版本: 93.0.4577.63
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接运行即可
直接运行即可
预期结果:
显示svga格式文件
显示svga格式文件
实际结果:
报错,未显示
报错,未显示
bug描述:
uniapp 使用renderjs 加载svga动画格式文件,报错Cannot set properties of undefined (setting 'width')",
Cannot read properties of undefined (reading 'requestAnimationFrame')
3 个回复
d***@163.com
view换成div
疾风kkk
解决没?我也是一样的问题
3***@qq.com
解决了么
2023-02-24 15:41
3***@qq.com
解决了么 报错 TypeError: null is not an object (evaluating 'h.input.length')