代码拉取完成，页面将自动刷新
专为微信小程序开发的 SVGA 播放器，已在 iOS 及 Android 手机上测试通过。
示例代码片段 https://developers.weixin.qq.com/s/u2JBSOmy7rqU
请仔细阅读文档和示例，如有疑问，可添加作者微信(ponycui)，可提供技术服务。
轻点 GitHub Star，让更多人看到该项目。
直接复制 ./dist/svgaplayer.weapp.js 到你的小程序工程目录下。
在需要添加播放器的 wxml 文件内，添加 canvas 组件，注意 canvas 的 id 必填，下一步会用到，type 必须为 2d。
<view class="container">
<canvas id="demoCanvas" type="2d" style="width: 300px; height: 300px; background-color: black"></canvas>
</view>
onLoad，执行以下代码，即可播放动画。const { Parser, Player } = require("../../libs/svgaplayer.weapp"); // 此处替换为 svgaplayer.weapp.js 放置位置
Page({
data: {
},
async onLoad() {
try {
const parser = new Parser;
const player = new Player;
await player.setCanvas('#demoCanvas')
const videoItem = await parser.load("https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga");
await player.setVideoItem(videoItem);
player.startAnimation();
} catch (error) {
console.log(error);
}
},
})
直接复制 ./dist/svgaplayer.weapp.js 到你的小程序工程目录下。
由于需要使用到my.getFileSystemManager相关的API，请先为小程序添加文件管理器能力。添加完毕后需要重新预览方可调用相关API。
在需要添加播放器的 axml 文件内，添加 canvas 组件，注意 canvas 的 id 必填，后面会用到，且type 必须为 2d。因为svga动画所需的各项前置能力支付宝基础库2.7.3以上才全部支持，请确保支付宝小程序已启用基础库2.0。
<!-- page.axml -->
<view class="container">
<canvas id="demoCanvas" type="2d" onReady="onCanvasReady" style="width: 300px; height: 300px; background-color: black"></canvas>
</view>
在需要播放的时机，播放svga逻辑请在onReady事件触发之后执行，在这个时刻之前执行可能因native canvas还未初始化完毕而出现异常。
若需要读取本地文件，需要在mini.project.json内配置需要读取的内容。例如
{
"include": [
"assets/*.svg"
]
}
const { Parser, Player } = require("../../libs/svgaplayer.weapp"); // 此处替换为 svgaplayer.weapp.js 放置位置
Page({
data: {
},
async onCanvasReady() {
try {
const parser = new Parser;
const player = new Player;
await player.setCanvas('#demoCanvas')
const videoItem = await parser.load("https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga");
await player.setVideoItem(videoItem);
player.startAnimation();
} catch (error) {
console.log(error);
}
},
})
通过 npm install git+https://github.com/svga/svgaplayer-weapp.git --save 安装依赖。
参照以下代码添加 Canvas 并配置动画。
import { Component } from 'react'
import { View, Text, Canvas } from '@tarojs/components'
import { Parser, Player } from "svgaplayer-weapp";
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'
export default class Index extends Component {
componentDidMount () {
this.loadAnimation();
}
async loadAnimation() {
const parser = new Parser;
const player = new Player;
await player.setCanvas('#demoCanvas')
const videoItem = await parser.load("https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga");
await player.setVideoItem(videoItem);
player.startAnimation();
}
render () {
return (
<View className='index'>
<Canvas type="2d" id="demoCanvas" style={{width: "300px", height: "300px", backgroundColor: "black"}} />
</View>
)
}
}
npm 包已附带 Types，可支持 TypeScript 代码提示。
load(url: string): Promise<VideoEntity>
从网络或本地资源包加载 VideoEntity。
loops = 0
属性，设置当前动画的循环次数，0代表无限循环。
clearsAfterStop = true
属性，为 true 时，表示动画停止播放后默认清空画布。
fillMode = "Forward"
属性，为 Forward 时，表示动画播放结束后保留在最后一帧。为 Backward 时，表示保留在第一帧。
async setCanvas(selector: string): Promise<any>
设置目标 canvas，这里需要填入 selector，比如 id="demoCanvas"，则填 #demoCanvas。
async setVideoItem(videoItem?: VideoEntity): Promise<any>
设置需要播放的 VideoEntity 动画实体。
setContentMode(contentMode: string)
设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit。
startAnimation(reverse: boolean = false)
开始播放动画，reverse = true 时则反向播放。
startAnimationWithRange(range: Range, reverse: boolean = false)
开始播放动画，在指定 Range 内播放。
pauseAnimation()
暂停播放动画。
stopAnimation(clear?: boolean)
停止播放动画，当 clear 为 true 时，清空画布。
clear()
清空画布
stepToFrame(frame: number, andPlay: boolean = false)
跳转动画的指定帧，andPlay 为 true 时，从该帧开始播放动画。
stepToPercentage(percentage: number, andPlay: boolean = false)
跳转动画的指定进度百分比，andPlay 为 true 时，从该帧开始播放动画。
async setImage(src: Uint8Array | string, forKey: string): Promise<any>
使用图片替换指定元素
setText(dynamicText: DynamicText, forKey: string)
添加文本到指定元素上
clearDynamicObjects()
清空所有替换元素。
onFinished(callback: () => void)
监听动画完成
onFrame(callback: (frame: number) => void)
监听动画播放过程中，当前帧的变化。
onPercentage(callback: (percentage: number) => void)
监听动画播放过程中，当前进度的变化。
interface Range {
location: number; // 起始帧
length: number; // 长度
}
interface DynamicText {
text: string;
size: number;
family: string;
color: string;
offset: { x: number; y: number };
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
