更新记录

0.0.5（2026-06-29）

• fix: 修复web无法无限重复问题

0.0.4（2026-06-12）

• feat: 非APP端支持自动播放(autoPlay)和重复次数(repeatCount)响应式更新
• fix: 非APP端修复PAGView.play is not a function的问题
• fix: 非APP端canvas id改为唯一值，支持多实例
• fix: APP端watchEffect改为独立watch，避免autoPlay/repeatCount变化时重新加载PAG文件
• fix: 鸿蒙端移除load中硬编码的setRepeatCount(-1)
• fix: 鸿蒙端destroy方法改为release()

0.0.3（2025-08-24）

• feat: 兼容鸿蒙Next

平台兼容性

uni-app x(4.76)

lime-pag-x PAG动画播放组件（uni-app x）

基于 PAG 格式的高性能动画播放组件，适用于 uni-app x 项目，支持 Android、iOS、Harmony、H5、小程序多端运行，提供播放控制、重复次数设置、自动播放等功能。

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

安装方法

1. 在uni-app插件市场中搜索并导入lime-pag-x
2. 导入后可能需要重新编译项目
3. App端需要在自定义基座中使用
4. 微信小程序：npm install libpag-miniprogram --save
5. 在页面中使用l-pag-x组件

注意：小程序控制台报错提示未加载wasm时，请把node_modules/libpag-miniprogram/lib/libpag.wasm.br复制到uni_modules/lime-pag-x/static/mp-weixin/目录下

代码演示

基础用法

设置 src 属性指向 PAG 文件路径，配合 autoPlay 自动播放。

<l-pag-x
  l-style="height: 300px;"
  :src="src"
  autoPlay
  @animationStart="animationStart"
  @animationEnd="animationEnd">
</l-pag-x>

<script setup lang="uts">
  const src = '/static/like.pag'

  function animationStart() {
    console.log('动画开始')
  }

  function animationEnd() {
    console.log('动画结束')
  }
</script>

手动控制

通过 ref 获取组件实例，手动调用 play()、pause() 等方法控制播放，配合 repeatCount 设置重复次数。

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

<view class="demo-btns">
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
</view>
<view class="demo-row">
  <text>重复次数：{{ repeatCount == -1 ? '无限' : repeatCount }}</text>
  <button @click="changeRepeatCount">切换</button>
</view>

<script setup lang="uts">
  const src = '/static/like.pag'
  const repeatCount = ref(0)
  const pagPlayer = ref<LPagXComponentPublicInstance | null>(null)

  function animationStart() {
    console.log('动画开始')
  }

  function animationEnd() {
    console.log('动画结束')
  }

  function onLoaded() {
    // 初始化完成
  }

  function play() {
    pagPlayer.value?.play()
  }

  function pause() {
    pagPlayer.value?.pause()
  }

  function changeRepeatCount() {
    const counts = [0, 1, 3, 5, -1]
    const idx = counts.indexOf(repeatCount.value)
    repeatCount.value = counts[(idx + 1) % counts.length]
  }
</script>

API文档

Props 属性说明

Events 事件

方法 API

通过组件 ref 实例调用方法：

<script setup lang="uts">
  const pagPlayer = ref<LPagXComponentPublicInstance | null>(null)

  function play() {
    pagPlayer.value?.play()
  }
</script>

使用注意事项

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

文档链接

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

支持与赞赏

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

支付宝赞助	微信赞助