做直播礼物、入场特效、会员开通或活动奖励时SVGA 往往不是“能播放就行”。真正麻烦的是连续礼物到来后画面闪一下、旧动画的回调跑到新动画上、资源还没加载完就被下一条覆盖接完原生 SDK 后又发现普通调试基座根本没有对应依赖。如果项目是 uni-app App nvue 或 uni-app x Appkongbai-svga 就是为这些问题准备的原生 SVGA 播放组件。它基于 Android/iOS 原生 SVGAPlayer 封装重点不是堆接口而是把直播和业务动画的连续播放链路做完整。一、先明确适用范围少走弯路组件支持 uni-app App nvue 页面和 uni-app x App 的 Android、iOS 端Android 最低 API 21iOS 最低 iOS 12。普通 uni-app vue 页面、H5 和小程序不在支持范围内。这点很重要组件依赖原生 SDK导入或更新插件后必须重新制作自定义基座或重新云打包。普通调试基座和热更新不会包含 SVGAPlayer-Android出现 NoClassDefFoundError: com.opensource.svgaplayer.SVGAImageView 时优先检查打包方式而不是反复改业务代码。二、连续礼物为什么容易闪屏、串线连续调用动画播放时旧资源可能还在解析新的礼物又已经到达。如果播放器没有处理好资源切换常见现象就是闪屏、旧动画完成事件误触发、回调串到新礼物。kongbai-svga 在再次调用 loadAndPlay() 时会停止当前动画、清空画布并加载新资源旧资源尚未完成的解析结果和播放回调会被忽略。对礼物流、连击特效这类“后来的动画优先”的场景这比单纯包一层原生播放器更省心。三、最小接入插件放入 uni_modules/kongbai-svga 后会自动注册无需手动 import。uni-app 项目在 .nvue 页面使用uni-app x 项目在 .uvue 页面使用。kongbai-svgarefsvgaRefclasssvga-player:autoPlayfalse:loops1fillModeforwardscaleModefitCenterreadyonReadyfinishedonFinishederroronError/kongbai-svga加载并播放本地资源this.$refs.svga.loadAndPlay(/static/gift-1.svga)播放网络资源this.$refs.svga.loadAndPlay(https://example.com/gift-1.svga)本地资源请放到 static 目录通过 /static/... 根路径加载。网络地址必须能被 App 直接访问加载失败会通过 error 事件返回原因。四、播放控制不只是一句 play组件支持 load、play、pause、resume、stop、clear以及循环次数、结束画面与缩放模式控制。暂停会保留当前帧resume 从暂停位置继续stop 会重置播放进度clear 会释放当前资源后续需重新加载。做仪式感动画时指定帧能力也很实用this.$refs.svga.stepToFrame(30, true)this.$refs.svga.stepToPercentage(0.5, true)this.$refs.svga.playRange(20, 40, false)资源触发 ready 后再执行跳帧能够避免“资源未就绪就控制播放”的不确定行为。五、适合哪些业务1. 直播间礼物、连击和入场动画2. 会员开通、勋章解锁、等级升级3. 活动抽奖、任务完成、奖励到账4. 需要内嵌音频、循环控制或指定帧播放的 App 特效组件也提供 ready、play、loop、frame、finished、error 等事件方便把动画状态接入自己的业务埋点、礼物队列或页面状态。插件市场地址https://ext.dcloud.net.cn/plugin?id28716如果你的项目正卡在“SVGA 能播但不稳定”的阶段可以先从连续资源切换和重新制作包含原生依赖的基座这两件事开始检查。
做直播礼物、入场特效、会员开通或活动奖励时SVGA 往往不是“能播放就行”。真正麻烦的是连续礼物到来后画面闪一下、旧动画的回调跑到新动画上、资源还没加载完就被下一条覆盖接完原生 SDK 后又发现普通调试基座根本没有对应依赖。如果项目是 uni-app App nvue 或 uni-app x Appkongbai-svga 就是为这些问题准备的原生 SVGA 播放组件。它基于 Android/iOS 原生 SVGAPlayer 封装重点不是堆接口而是把直播和业务动画的连续播放链路做完整。一、先明确适用范围少走弯路组件支持 uni-app App nvue 页面和 uni-app x App 的 Android、iOS 端Android 最低 API 21iOS 最低 iOS 12。普通 uni-app vue 页面、H5 和小程序不在支持范围内。这点很重要组件依赖原生 SDK导入或更新插件后必须重新制作自定义基座或重新云打包。普通调试基座和热更新不会包含 SVGAPlayer-Android出现 NoClassDefFoundError: com.opensource.svgaplayer.SVGAImageView 时优先检查打包方式而不是反复改业务代码。二、连续礼物为什么容易闪屏、串线连续调用动画播放时旧资源可能还在解析新的礼物又已经到达。如果播放器没有处理好资源切换常见现象就是闪屏、旧动画完成事件误触发、回调串到新礼物。kongbai-svga 在再次调用 loadAndPlay() 时会停止当前动画、清空画布并加载新资源旧资源尚未完成的解析结果和播放回调会被忽略。对礼物流、连击特效这类“后来的动画优先”的场景这比单纯包一层原生播放器更省心。三、最小接入插件放入 uni_modules/kongbai-svga 后会自动注册无需手动 import。uni-app 项目在 .nvue 页面使用uni-app x 项目在 .uvue 页面使用。kongbai-svgarefsvgaRefclasssvga-player:autoPlayfalse:loops1fillModeforwardscaleModefitCenterreadyonReadyfinishedonFinishederroronError/kongbai-svga加载并播放本地资源this.$refs.svga.loadAndPlay(/static/gift-1.svga)播放网络资源this.$refs.svga.loadAndPlay(https://example.com/gift-1.svga)本地资源请放到 static 目录通过 /static/... 根路径加载。网络地址必须能被 App 直接访问加载失败会通过 error 事件返回原因。四、播放控制不只是一句 play组件支持 load、play、pause、resume、stop、clear以及循环次数、结束画面与缩放模式控制。暂停会保留当前帧resume 从暂停位置继续stop 会重置播放进度clear 会释放当前资源后续需重新加载。做仪式感动画时指定帧能力也很实用this.$refs.svga.stepToFrame(30, true)this.$refs.svga.stepToPercentage(0.5, true)this.$refs.svga.playRange(20, 40, false)资源触发 ready 后再执行跳帧能够避免“资源未就绪就控制播放”的不确定行为。五、适合哪些业务1. 直播间礼物、连击和入场动画2. 会员开通、勋章解锁、等级升级3. 活动抽奖、任务完成、奖励到账4. 需要内嵌音频、循环控制或指定帧播放的 App 特效组件也提供 ready、play、loop、frame、finished、error 等事件方便把动画状态接入自己的业务埋点、礼物队列或页面状态。插件市场地址https://ext.dcloud.net.cn/plugin?id28716如果你的项目正卡在“SVGA 能播但不稳定”的阶段可以先从连续资源切换和重新制作包含原生依赖的基座这两件事开始检查。
