VAP动画效果参数使用记录

本文介绍了如何在高德地图中使用VAP插件渲染动画marker,包括安装步骤、创建实例、实例方法和参数配置,展示了在Vue项目中集成VAP的具体实现。

目前使用的地方涉及高德地图上渲染动画marker,使用方式如下很实用
*
文档简介地址https://www.npmjs.com/package/video-animation-player
*
代码地址链接地址 https://github.com/Tencent/vap/blob/master/Introduction.md

安装(注意,需要UI提供VAP格式的MP4文件和JSON文件)

	npm i video-animation-player

创建实例

	import Vap from 'video-animation-player'
	# init
	let vap = new Vap(options)

实例方法

	1on(): 绑定h5 video事件或者自定义事件(frame: 接收当前帧和播放时间戳)on('playering', function() {// do some thing})
	2destroy():销毁实例,清除video、canvas等
	3pause():暂停播放
	4play():继续播放
	5setTime(s):设置播放时间点(单位秒)

实例参数

参数含义默认值
containerdom容器null
srcmp4视频地址“”
config配置json对象(详情见下文)‘’
width宽度375
height高度375
fps动画帧数(生成素材时在工具中填写的fps值)20
mute是否对视频静音false
loop是否循环播放false
type组件基于type字段做了实例化缓存,不同的VAP实例应该使用不同的type值(如0、1、2等)undefined
beginPoint起始播放时间点(单位秒),在一些浏览器中可能无效0
fontStyle融合字体样式用法参考‘’
accurate是否启用精准模式(使用requestVideoFrameCallback提升融合效果,浏览器不兼容时自动降级)false
precache是否预加载视频资源(默认关闭,即边下边播)false
onDestory组件销毁时回调undefined
onLoadError加载失败回调undefined
ext(无固定名)融合参数(和json配置文件中保持一致)‘’

标题VAP动画插件vue使用展示

	this.vap = new Vap({
	   container: document.getElementById('Dom'),
	   src: require('./vap.mp4'),
	   config: require('./vap.json'),
	   width: 1050,
	   height: 750,
	   accurate: true,
	   loop: true
	 })
	 this.vap.play()
VAP是腾讯开源的高性能动画播放器,是一款开源的动画播放解决方案,凭借高压缩率、硬件解码和复杂特效支持等特点,为用户提供极致动画体验,适用于游戏开发、直播平台和广告营销等场景 [^1]。 VAP本身就是用于动画播放的工具,它具有核心功能,包括高压缩率,相比传统的Webp、Apng动图方案,能使素材文件更小,节省存储空间和带宽;利用硬件解码技术,可实现更快的解码速度,提升动画播放的流畅度;能够实现更复杂的动画效果,如粒子特效,为开发者提供丰富的动画创作空间;还允许开发者在动画中融入自定义属性,如用户名称、头像等,增强动画的个性化表现 [^2]。 关于VAP动画具体的播放方法,一般在不同的应用场景和开发环境下会有不同的实现方式。例如在一些前端开发中,可通过引入相应的VAP播放器库文件,然后在代码里创建播放器实例,加载VAP动画文件进行播放。以下是一个简单的前端代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VAP Animation Play</title> <!-- 引入VAP播放器库 --> <script src="path/to/vap-player.js"></script> </head> <body> <!-- 创建一个容器用于显示VAP动画 --> <div id="vap-container"></div> <script> // 获取容器元素 const container = document.getElementById('vap-container'); // 创建VAP播放器实例 const vapPlayer = new VAPPlayer(container); // 加载VAP动画文件 vapPlayer.load('path/to/your-animation.vap'); // 播放动画 vapPlayer.play(); </script> </body> </html> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值