更新记录

1.0.1（2024-09-12）

修复bug

1.0.0（2024-09-12）

Pag动画插件

平台兼容性

yzc-pag-view 支持安卓、iOS端的Pag动画框架

组件引入

<pag-view 
ref="pagView" 
class="pagView" 
pag-file-path="/static/pag/test2.pag"
:repeat-count="100"
></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)
           }
       }
    }
}

组合式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)
    }
}

uniapp用法

选项式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)
       }
    }
}

组合式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)
    pagView.value.replaceText('123', 0)
}
const replaceText = () => {
    pagView.value.replaceText('123', 0)
}