基于腾讯Tencent开源框架Pag的封装插件。比svga、lottie内存占用更小更好用的动画插件，支持替换文字、图片（注意：需要打自定义基座，如果是uniapp页面需要使用nvue）

更新记录

1.0.6（2025-12-08）

• 优化

1.0.5（2025-12-05）

-优化

1.0.4（2025-06-23）

新增开始动画、结束动画回调方法，优化修复bug

查看更多

---

平台兼容性

uni-app(4.26)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	-	-	-	√	5.0	√	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
-	-	-	-	-	-	-	-	-	-	-

uni-app x(4.26)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	5.0	√	-	-

yzc-pag-view 支持安卓、iOS端的Pag动画框架 （注意：需要打自定义基座，如果是uniapp页面需要使用nvue）

组件引入

<pag-view 
ref="pagView" 
class="pagView" 
pag-file-path="/static/pag/test2.pag"
:repeat-count="100"
@animationStart="animationStart"
@animationEnd="animationEnd"
></pag-view>

uniappx用法

选项式API用法

export default {
    data() {
        return {}
    },
    methods: {
       // 播放
       play() {
           if (this.$refs['pagView'] == null) return
           const pagViewElement = this.$refs['pagView'] as PagViewElement
           const isPlaying = pagViewElement.isPlaying()
           if (isPlaying) return
           pagViewElement.play()
       },
       // 停止
       stop() {
           if (this.$refs['pagView'] == null) return
           const pagViewElement = this.$refs['pagView'] as PagViewElement
           pagViewElement.stop()
       },
       // 替换文字
       replaceText() {
           if (this.$refs['pagView'] == null) return
           const pagViewElement = this.$refs['pagView'] as PagViewElement
           if (pagViewElement.getPagFileNumTexts() > 0) {
              pagViewElement.replaceText('123', 0) 
           }
       },
       // 替换图片
       replaceImage() {
           if (this.$refs['pagView'] == null) return
           const pagViewElement = this.$refs['pagView'] as PagViewElement
           if (pagViewElement.getPagFileNumImages() > 0) {
                pagViewElement.replaceImage('/static/images/test.png', 0)
           }
       },
       // 替换图片base64数据
       replaceImageWithImageBase64() {
           if (this.$refs['pagView'] == null) return
           const pagViewElement = this.$refs['pagView'] as PagViewElement
           if (pagViewElement.getPagFileNumImages() > 0) {
               let base64Str = "*****" // 这里需替换成真实的base64数据
                pagViewElement.replaceImageWithImageBase64(base64Str, 0)
           }
       },
       // 开始动画回调
       animationStart() {
           console.log("开始动画")
       },
       // 结束动画回调
       animationEnd() {
            console.log("结束动画")
       }
    }
}

组合式API用法

const pagView  = ref(null)
// 播放
const play = () => {
    if (pagView.value == null) return
    const isPlaying = (pagView.value as PagViewElement).isPlaying()
    if (isPlaying) return
    (pagView.value as PagViewElement).play()
}
// 停止
const stop = () => {
    if (pagView.value == null) return
    (pagView.value as PagViewElement).stop()
}
// 替换图片
const replaceText = () => {
    if (pagView.value == null) return
    if ((pagView.value as PagViewElement).getPagFileNumTexts() > 0) {
         (pagView.value as PagViewElement).replaceText('123', 0) 
    }
}
// 替换文字
const replaceImage = () => {
    if (pagView.value == null) return
    if ((pagView.value as PagViewElement).getPagFileNumImages() > 0) {
        (pagView.value as PagViewElement).replaceImage('/static/images/test.png', 0)
    }
}
// 替换图片base64数据
const replaceImageWithImageBase64 = () => {
   if (pagView.value == null) return
   if ((pagView.value as PagViewElement).getPagFileNumImages() > 0) {
       let base64Str = "*****" // 这里需替换成真实的base64数据
       (pagView.value as PagViewElement).replaceImageWithImageBase64(base64Str, 0)
   }
}
// 开始动画回调
const animationStart = () => {
   console.log("开始动画")
}
// 结束动画回调
const animationEnd = () => {
    console.log("结束动画")
}

uniapp用法 （页面需要使用nvue）

选项式API用法

export default {
    data() {
        return {}
    },
    methods: {
       play() {
           this.$refs['pagView'].isPlaying((isPlaying: boolean) => {
                if (!isPlaying) {
                    this.$refs['pagView'].play()
                }
           }) 
       },
       stop() {
           this.$refs['pagView'].stop()
       },
       replaceImage() {
           this.$refs['pagView'].replaceImage('/static/images/test.png', 0)
       },
       replaceText() {
           this.$refs['pagView'].replaceText('123', 0)
       },
       replaceImageWithImageBase64() {
           let base64Str = "*****" // 这里需替换成真实的base64数据
           this.$refs['pagView'].replaceImageWithImageBase64(base64Str, 0)
       },
       animationStart() {
           console.log("开始动画")
       },
       animationEnd() {
           console.log("结束动画")
       }
    }
}

组合式API用法

const pagView = ref(null)
const play = () => {
    pagView.value.isPlaying(isPlaying => {
        if (!isPlaying) {
            pagView.value.play()
        }
    })
}
const stop = () => {
    pagView.value.stop()
}
const replaceImage = () => {
    pagView.value.replaceImage('/static/images/test.png', 0)
}
const replaceText = () => {
    pagView.value.replaceText('123', 0)
}
const replaceImageWithImageBase64 = () => {
    let base64Str = "*****" // 这里需替换成真实的base64数据
    pagView.value.replaceImageWithImageBase64('/static/images/test.png', 0)
}
const animationStart = () => {
   console.log("开始动画")
}
const animationEnd = () => {
    console.log("结束动画")
}