SVGAlayer-weapp 小程序版动画渲染库 - 文章教程

SVGAlayer-weapp 小程序版动画渲染库

发布于 2021-09-17 字数 7209 浏览 841 评论 0

专为微信小程序开发的 SVGA 播放器,已在 iOS 及 Android 手机上测试通过。

示例代码片段 https://developers.weixin.qq.com/s/u2JBSOmy7rqU

请仔细阅读文档和示例,如有疑问,可添加作者微信(ponycui),可提供技术服务。

安装方法

原生小程序

  1. 直接复制 ./dist/svgaplayer.weapp.js 到你的小程序工程目录下。
  2. 在需要添加播放器的 wxml 文件内,添加 canvas 组件,注意 canvas 的 id 必填,下一步会用到,type 必须为 2d。
<view class="container">
  <canvas id="demoCanvas" type="2d" style="width: 300px; height: 300px; background-color: black"></canvas>
</view>
  1. 在需要播放的时机,这里是 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);
    }
  },
})

原生小程序(支付宝)

  1. 直接复制 ./dist/svgaplayer.weapp.js 到你的小程序工程目录下。
  2. 由于需要使用到my.getFileSystemManager相关的API,请先为小程序添加文件管理器能力。添加完毕后需要重新预览方可调用相关API。
  3. 在需要添加播放器的 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>
  1. 在需要播放的时机,播放svga逻辑请在onReady事件触发之后执行,在这个时刻之前执行可能因native canvas还未初始化完毕而出现异常。
  2. 若需要读取本地文件,需要在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);
    }
  },
})

Taro

  1. 通过 npm install git+https://github.com/svga/svgaplayer-weapp.git --save 安装依赖。
  2. 参照以下代码添加 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>
    )
  }
}

Types

npm 包已附带 Types,可支持 TypeScript 代码提示。

API

Parser

load(url: string): Promise<VideoEntity>

从网络或本地资源包加载 VideoEntity

Player

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) 监听动画播放过程中,当前进度的变化。

Range

interface Range {
  location: number; // 起始帧
  length: number; // 长度
}

DynamicText

interface DynamicText {
  text: string;
  size: number;
  family: string;
  color: string;
  offset: { x: number; y: number };
}

项目地址:https://github.com/svga/svgaplayer-weapp

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
83580 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0