当前博客:谁能弄好SVGA动画插件啊?

105 次浏览【转载需注明来源】

博客作者:【柯敏轩】

个性签名:寒窗苦读十年一朝凤舞九天

我按照官方的方法弄了下,完全不懂里面的代码,各位朋友们,有人弄过这个吗:

https://ext.dcloud.net.cn/plugin?id=10625

 

默认排序
Generic placeholder image
Generic placeholder image
已采纳
轻声奏乐写代码 Time: 2024-01-06 22:08:24

我给你给你一个使用教学:

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

Generic placeholder image
快码FOF编程 Time: 2024-01-14 17:45:15

注意一下,上面的回复确实可以运行,但是在微信小程序中编译会出现问题;执行完上面回复的npm后,还需要执行一下这个npm才可以正常在小程序运行:

npm i sass -D

谁能弄好SVGA动画插件啊?