lime-pag-x

基于 PAG 格式的高性能动画播放组件，支持基础播放控制与动画状态监听

文档

pag-x

安装

导入，在页面上使用组件标签，自定义基座后使用

代码演示

基础使用

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

export default {
	data() {
		return {
			src2: '/static/like.pag'
		}
	},
	methods: {
		animationStart() {
			console.log('动画开始')
		},
		animationEnd() {
			console.log('动画结束')
		},
		onLoaded() {
			const player = this.$refs["pagPlayer"] as LPagXElement
			player.play()
		}
	}
}

API 参考

Props

属性名	类型	默认值	说明
src	String	""	PAG 文件资源地址

事件列表

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

方法 API

通过 ref 调用：

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

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

// 播放控制
play()          // 开始/继续播放
pause()         // 暂停播放
// 状态获取
isPlaying()     // 返回播放状态（true=播放中）
// 资源加载
load('new.pag') // 加载新动画文件

源代码

组件源码