更新记录

1.0.0（2023-12-07）

引入小程序及web端的sdk

平台兼容性

设备有限这里是通过 renderjs 实现让 ios和Android 业内有web同样的操作，所以理论上来说兼用就是官网所说的： renderjs地址

这里就简单的接入了微信小程序

如果想要iOS原生、Android原生、各类小程序也可以在官网或GitHub上面找，我也是在上面找的

svga官网 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 资源，传递就可以了