更新记录

0.0.3（2025-08-24）

• feat: 兼容鸿蒙Next

0.0.2（2025-05-17）

• feat 增加手动调用load等设置

0.0.1（2025-04-03）

• init

平台兼容性

uni-app x(4.76)

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

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

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

文档链接

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

• PAG动画播放组件文档 - 站点1
• PAG动画播放组件文档 - 站点2
• PAG动画播放组件文档 - 站点3

安装方法

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

   代码演示

基础用法

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

<l-pag-x 
  style="height: 300px;" 
  :src="pagSrc">
</l-pag-x>

export default {
  data() {
    return {
      pagSrc: '/static/animation.pag'
    }
  }
}

完整示例

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

<l-pag-x 
  style="height: 600px;" 
  :src="src" 
  ref="pagPlayer" 
  @animationStart="animationStart"
  @animationEnd="animationEnd"
  @init="onLoaded">
</l-pag-x>

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')
    }
  }
}

插件标签说明

API文档

Props 属性说明

Events 事件

方法 API

通过组件实例调用方法：

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

// uniappx
const player = this.$refs["pagPlayer"] as LPagXElement

使用注意事项

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

支持与赞赏

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

支付宝赞助	微信赞助