LimeUI+1.2.1

主题

lime-pag-x PAG动画播放组件 ​

基于 PAG 格式的高性能动画播放组件，支持基础播放控制与动画状态监听。PAG是一种高效的动画格式，可以实现轻量级的动画效果，适用于各种交互场景和UI动效展示。

插件依赖：需要在自定义基座中使用

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-pag-x
  2. 导入后可能需要重新编译项目
  3. 需要在自定义基座中使用
  4. 在页面中使用l-pag-x组件
  5. 本插件标签仅支持安卓和IOS，鸿蒙Next需要配合lime-pag

代码演示 ​

基础用法 ​

最简单的PAG动画播放组件用法，设置src属性指向PAG文件路径。

html
<l-pag-x 
  style="height: 300px;" 
  :src="pagSrc">
</l-pag-x>
js
export default {
  data() {
    return {
      pagSrc: '/static/animation.pag'
    }
  }
}

完整示例 ​

包含动画控制和事件监听的完整示例。

html
<l-pag-x 
  style="height: 600px;" 
  :src="src" 
  ref="pagPlayer" 
  @animationStart="animationStart"
  @animationEnd="animationEnd"
  @init="onLoaded">
</l-pag-x>
javascript
export default {
  data() {
    return {
      src: '/static/like.pag'
    }
  },
  methods: {
    animationStart() {
      console.log('动画开始')
    },
    animationEnd() {
      console.log('动画结束')
    },
    onLoaded() {
      // 获取播放器实例并播放
      const player = this.$refs["pagPlayer"] as LPagXElement
      player.play()
    },
    // 控制动画的方法示例
    controlAnimation() {
      const player = this.$refs["pagPlayer"] as LPagXElement
      
      // 播放动画
      player.play()
      
      // 暂停动画
      // player.pause()
      
      // 检查是否正在播放
      const isPlaying = player.isPlaying()
      console.log('是否正在播放:', isPlaying)
      
      // 加载新的动画文件
      // player.load('/static/new-animation.pag')
    }
  }
}

插件标签说明 ​

标签名说明
l-pag-x组件标签

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
srcPAG 文件资源地址string""

Events 事件 ​

事件名说明回调参数
init组件初始化完成-
animationStart动画开始播放-
animationEnd动画正常结束-
animationUpdate动画进度更新-
animationRepeat动画循环播放-
animationCancel动画被中断-
frame当前播放帧数frame: number
fail加载/播放失败error: Error

方法 API ​

通过组件实例调用方法：

javascript
// uniapp
const player = this.$refs.pagPlayer

// uniappx
const player = this.$refs["pagPlayer"] as LPagXElement
方法名说明参数
play开始/继续播放动画-
pause暂停播放动画-
isPlaying返回播放状态（true=播放中）-
load加载新动画文件src: string

使用注意事项 ​

  1. 组件需要在自定义基座中使用，普通编译环境可能无法正常运行
  2. 确保PAG文件路径正确，且文件格式符合要求
  3. 组件高度需要通过style属性设置，否则可能无法正常显示
  4. 在组件初始化完成后（init事件触发）再进行播放控制操作

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码