uniapp原生插件之安卓SVGA动画原生插件

插件介绍

安卓SVGA插件是原生组件式插件,支持SVGA动画文件格式播放,支持网络地址播放

插件地址

安卓SVGA动画原生插件 - DCloud 插件市场

详细使用文档

uniapp 安卓SVGA动画原生插件

超级福利

uniapp 插件购买超级福利

用法

插件权限

  • android.permission.INTERNET
  • android.permission.WRITE_EXTERNAL_STORAGE
  • android.permission.READ_EXTERNAL_STORAGE

插件引入

在需要使用插件的页面加载以下代码

javascript 复制代码
<leven-svga ref="refLevenSvga" style="height: 500rpx; width: 750rpx;" @onComplete="onComplete" @onError="onError" @onPlay="onPlay"
@onPause="onPause" @onFinished="onFinished" @onRepeat="onRepeat" @onStep="onStep" @onLoadingStart="onLoadingStart" @onLoading="onLoading"
@onLoadingSuccess="onLoadingSuccess"></leven-svga>

完整页面内容

html 复制代码
<template>
  <view>
    <view>
      <uni-card title="uniappSVGA原生插件">
        <leven-svga ref="refLevenSvga" style="height: 500rpx; width: 750rpx;" @onComplete="onComplete" @onError="onError" @onPlay="onPlay"
          @onPause="onPause" @onFinished="onFinished" @onRepeat="onRepeat" @onStep="onStep" @onLoadingStart="onLoadingStart" @onLoading="onLoading"
          @onLoadingSuccess="onLoadingSuccess"></leven-svga>
        <button type="primary" @click="logStr = ''">清空日志</button>
        <button type="primary" @click="play">开始播放</button>
        <button type="primary" @click="pause">暂停播放</button>
        <button type="primary" @click="resumePlay">继续播放</button>
        <button type="primary" @click="stop">结束播放</button>
      </uni-card>
    </view>
    <view>
      <uni-card class="uni-card-box" title="日志">
        <view><text style="font-size: 14px; flex-wrap: wrap;">{{logStr}}</text></view>
      </uni-card>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        logStr: ""
      }
    },
    methods: {
      // 开始播放
      play() {
        if (this.$refs.refLevenSvga) {
          this.$refs.refLevenSvga.play({
            path: "/static/1.svga",
            loop: 1, //循环播放次数,0.无限循环,1.循环一次
          }, res => {
            this.writeLog(JSON.stringify(res));
          });
        }
      },
      // 暂停播放
      pause() {
        if (this.$refs.refLevenSvga) {
          this.$refs.refLevenSvga.pause();
        }
      },
      // 继续播放
      resumePlay() {
        if (this.$refs.refLevenSvga) {
          this.$refs.refLevenSvga.resumePlay();
        }
      },
      // 暂停播放
      stop() {
        if (this.$refs.refLevenSvga) {
          this.$refs.refLevenSvga.stop({
            clear: false
          }, res => {
            this.writeLog(JSON.stringify(res));
          });
        }
      },
      // 加载完成
      onComplete(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 加载错误
      onError(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 开始播放
      onPlay(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 暂停播放
      onPause(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 播放完成
      onFinished(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 重复播放
      onRepeat(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 停止播放
      onStep(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 开始加载(网络地址有效)
      onLoadingStart(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 加载中(网络地址有效)
      onLoading(e) {
        // this.writeLog(JSON.stringify(e));
      },
      // 加载完成(网络地址有效)
      onLoadingSuccess(e) {
        this.writeLog(JSON.stringify(e));
      },
      // 写日志
      writeLog(str) {
        // let logStr = uni.$lv.date.format(null, "yyyy-mm-dd hh:MM:ss") + " " + str + "\n";
        // this.logStr = logStr + this.logStr;
        console.log(str)
      }
    }
  }
</script>

<style>

</style>

插件方法

  • 开始播放 play
  • 暂停播放 pause
  • 继续播放 resumePlay
  • 停止播放 stop

插件事件

  • 加载完成 onComplete
  • 加载错误 onError
  • 开始播放 onPlay
  • 暂停播放 onPause
  • 重复播放 onRepeat
  • 播放进度 onStep
  • 播放结束 onFinished
  • 网络地址开始加载 onLoadingStart
  • 网络地址加载中 onLoading
  • 网络地址加载完成 onLoadingSuccess

具体方法和事件的使用请参考详细使用文档

联系作者

购买插件前请先试用,试用通过再购买。在试用中如果遇到任何问题,可与作者联系,QQ:334106817,将全力协助你使用本插件

预览图片

相关推荐
恋猫de小郭2 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆5 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼15 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子17 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆18 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了18 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
@Ryan Ding18 分钟前
MySQL主从复制与读写分离概述
android·mysql·adb
江城开朗的豌豆23 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆24 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆25 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js