105 次浏览【转载需注明来源】
博客作者:【柯敏轩】
我按照官方的方法弄了下,完全不懂里面的代码,各位朋友们,有人弄过这个吗:
https://ext.dcloud.net.cn/plugin?id=10625
我给你给你一个使用教学:
1、首先下载支持库到uni_modules目录
2、在你快码调试后的主目录,右键打开终端
3、在终端执行下载NPM库下载命令【这就是这个插件坑的地方,这个作者既然没有介绍需要下载环境库?】
分别执行这三条终端命令即可:
npm install howler --save npm install svgaplayerweb --save npm install svgaplayer-weapp --save
下面是执行后的结果:
然后你就可以成功的运行了
这里给你一个快码的代码,你复制到自己的项目里面,按照上面的描述装好插件和执行一遍NPM命令就行
<页面> <区块 类名="page"> <c-svga ref="cSvgaRef" :canvasId="canvasId" :src="src" :loops="0" :auto-play="true" @frame="onFrame" @finished="onFinished" @percentage="onPercentage" @loaded="onLoaded"></c-svga> <区块 类名="content"> <区块>切换图像</区块> <区块 类名="btnBox"> <按钮 @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/b3875bda-8de0-476d-8f55-d10b24f16d98.svg'" 大小="迷你大小">小汽车</按钮> <按钮 @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/eebed809-b03e-4b90-88f8-5d6811b65f86.svg'" 大小="迷你大小">玫瑰花</按钮> </区块> <区块>播放暂停</区块> <区块 类名="btnBox"> <按钮 @click="$refs.cSvgaRef.call('startAnimation')" 大小="迷你大小">播放</按钮> <按钮 @click="$refs.cSvgaRef.call('startAnimation',true)" 大小="迷你大小">反向播放</按钮> <按钮 @click="$refs.cSvgaRef.call('pauseAnimation')" 大小="迷你大小">暂停播放</按钮> <按钮 @click="$refs.cSvgaRef.call('stopAnimation')" 大小="迷你大小">停止播放</按钮> </区块> <区块>设置动画的拉伸模式</区块> <区块 类名="btnBox"> <按钮 @click="$refs.cSvgaRef.call('setContentMode','Fill')" 大小="迷你大小">Fill</按钮> <按钮 @click="$refs.cSvgaRef.call('setContentMode','AspectFill')" 大小="迷你大小">AspectFill</按钮> <按钮 @click="$refs.cSvgaRef.call('setContentMode','AspectFit')" 大小="迷你大小">AspectFit</按钮> </区块> <区块>强制清空画布</区块> <区块 类名="btnBox"> <按钮 @click="$refs.cSvgaRef.call('clear')" 大小="迷你大小">清空画布</按钮> </区块> <区块>跳到指定帧/百分比</区块> <区块 类名="btnBox"> <按钮 @click="$refs.cSvgaRef.call('stepToFrame',[40,true])" 大小="迷你大小">跳到40帧</按钮> <按钮 @click="$refs.cSvgaRef.call('stepToPercentage',[60,true])" 大小="迷你大小">跳到60%</按钮> </区块> <区块>设定动态图像/动态文本</区块> <区块 类名="btnBox"> <按钮 @click="$refs.cSvgaRef.call('setImage',['/static/index/logo.png','06'])" 大小="迷你大小">动态图像</按钮> <按钮 @click="$refs.cSvgaRef.call('setText',[{text:'Hello, World!'},'08'])" 大小="迷你大小">动态文本</按钮> <按钮 @click="$refs.cSvgaRef.call('clearDynamicObjects')" 大小="迷你大小">清空动态图像和文本</按钮> </区块> </区块> </区块> </页面> <脚本> 局部变量 数据层 = { //所有的页面数据,请在本处定义 canvasId: "myCanvas", src: "https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/b3875bda-8de0-476d-8f55-d10b24f16d98.svg" }; </脚本> <脚本> 局部变量 方法层 = { //所有页面方法,请在本处定义 onFinished() { 调试输出("动画停止播放时回调"); }, onFrame(frame) { //动画播放至某帧后回调 // 调试输出(frame); }, onPercentage(percentage) { //动画播放至某进度后回调 // 调试输出(percentage); }, onLoaded() { 调试输出("加载完成"); } }; </脚本> <样式 语言代码="scss"> .page { 宽度: 100vw; 溢出-x轴: 隐藏; } .content { 内边距: 20rpx; 字体-大小: 28rpx; } .btnBox { 宽度: 100%; 显示模式: 弹性布局; 对齐-项目: 居中; 上边距: 20rpx; 下边距: 30rpx; } </样式>
SVGA快码代码.zip
注意一下,上面的回复确实可以运行,但是在微信小程序中编译会出现问题;执行完上面回复的npm后,还需要执行一下这个npm才可以正常在小程序运行:
npm i sass -D
不能恶意举报,否则进行封号处理!
测试账号
轻声奏乐写代码 Time: 2024-01-06 22:08:24
评论ID
我给你给你一个使用教学:
1、首先下载支持库到uni_modules目录
2、在你快码调试后的主目录,右键打开终端
3、在终端执行下载NPM库下载命令【这就是这个插件坑的地方,这个作者既然没有介绍需要下载环境库?】
分别执行这三条终端命令即可:
下面是执行后的结果:
然后你就可以成功的运行了
这里给你一个快码的代码,你复制到自己的项目里面,按照上面的描述装好插件和执行一遍NPM命令就行
快码FOF编程 Time: 2024-01-14 17:45:15
评论ID
注意一下,上面的回复确实可以运行,但是在微信小程序中编译会出现问题;执行完上面回复的npm后,还需要执行一下这个npm才可以正常在小程序运行: