更新记录
1.0.0(2023-12-07) 下载此版本
引入小程序及web端的sdk
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
3.1.0 |
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios | app-harmony |
---|---|---|---|---|
? | ? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
设备有限这里是通过 renderjs 实现让 ios和Android 业内有web同样的操作,所以理论上来说兼用就是官网所说的: renderjs地址
这里就简单的接入了微信小程序
如果想要iOS原生、Android原生、各类小程序也可以在官网或GitHub上面找,我也是在上面找的
使用
<yjd-svga :fileSource="fileSource" @svgplayer="svgplayer"></yjd-svga>
fileSource svga的在线地址(注意跨域)
svgplayer 回调{player,parser}
player的属性、方法及回调
属性
- int loops; - 动画循环次数,默认值为 0,表示无限循环。
- BOOL clearsAfterStop; - 默认值为 true,表示当动画结束时,清空画布。
- string fillMode; - 默认值为 Forward,可选值 Forward / Backward,当 clearsAfterStop 为 false 时,Forward 表示动画会在结束后停留在最后一帧,Backward 则会在动画结束后停留在第一帧。
示例
player.loops = 1
方法
- startAnimation(reverse: boolean = false); - 从第 0 帧开始播放动画
- startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - 播放 [location, location+length] 指定区间帧动画
- pauseAnimation(); - 暂停在当前帧
- stopAnimation(); - 停止播放动画,如果 clearsAfterStop === true,将会清空画布
- setContentMode(mode: "Fill" | "AspectFill" | "AspectFit"); - 设置动画的拉伸模式
- setClipsToBounds(clipsToBounds: boolean); - 如果超出盒子边界,将会进行裁剪
- clear(); - 强制清空画布
- stepToFrame(frame: int, andPlay: Boolean); - 跳到指定帧,如果 andPlay === true,则在指定帧开始播放动画
- stepToPercentage(percentage: float, andPlay: Boolean); - 跳到指定百分比,如果 andPlay === true,则在指定百分比开始播放动画
- setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - 设定动态图像, transform 是可选的, transform 用于变换替换图片
- setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - 设定动态文本
- clearDynamicObjects(); - 清空所有动态图像和文本
示例
player.startAnimation();
回调
- onFinished(callback: () => void): void; - 动画停止播放时回调
- onFrame(callback: (frame: number): void): void; - 动画播放至某帧后回调
- onPercentage(callback: (percentage: number): void): void; - 动画播放至某进度后回调
示例
player.onFinished(res=>{ console.log(res,"动画结束") })
SVGA.Parser
SVGA.Parser 用于加载远端或 Base64 动画,并转换成 VideoItem。
跨域的 SVGA 资源需要使用 CORS 协议才能加载成功。
加载 Base64 资源,或者 File 资源,传递就可以了