简洁轻量的SVGA动效

莲青见卿

已于 2022-11-02 17:14:09 修改

阅读量1.7k

点赞数

分类专栏：前端动效文章标签：动画前端 javascript

于 2021-01-27 16:59:15 首次发布

本文链接：https://blog.csdn.net/vh_YUNYANGYUMO/article/details/113244649

版权

前端动效专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简洁轻量的SVGA动效

简介

SVGA是一种动画格式，可以兼容安卓、ios和web，可以实现很多复杂的动画，避免了canvas来实现动画时的卡顿优化问题

结合项目使用
下载svgaplayerweb包

import SVGA from 'svgaplayerweb'

this.start = 'colorv/resource/ba27dd66524355aac0b5af17870977af.svga' // 不同动效路径
this.start1 = 'colorv/resource/ffa8dbf29bdf704612009aef085d10d4.svga' // 进场开始
    
componentDidMount() {
	this.setSvga(this.start1, 1)
}

// svga动效
setSvga = (src, count) => {
  let element = document.getElementById('banner')
  if (!element) return
  let player = new SVGA.Player('#' + element.id)
  let parser = new SVGA.Parser('#' + element.id) // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
  parser.load(config.base_src + src, (videoItem) => {
    player.loops = count
    player.setVideoItem(videoItem)
    player.startAnimation()
    player.onFrame((i) => {
      if (i === 29 && count === 1) {
        this.setSvga(this.start, 5)
      }
    })
  })
}
render() {
	<div>
		<div className="banner" id="banner" style={{ zIndex: 99 }}>
		  // 背景图 动效会覆盖
          <img src={`${config.base_src}colorv/resource/1b9e446de47471cfaf9d25783b1cc0a1.png`} />
        </div>
	</div>
}

对应用法介绍
loops | 循环次数（数值或字符串数值）/‘loops’（默认循环）
clearsAfterStop | 动画结束都是否清楚内容，注意，这里如果不设置默认true
setVideoItem | 需要获取load返回参数才能生效
startAnimation | 开始动画
pauseAnimation | 暂停动画
stopAnimation | 停止动画
clearsAfterStop | 是否清除结束后定帧（默认清除）布尔类型，ture => 清除 false => 不清除
stepToFrame(开始帧数, true) | 第二个值为true是从指定帧开始播放，第二个值为false时是停止在指定帧数
onFrame | 通过这个函数知道当前动画是播放的第几帧，然后根据具体业务需求展示效果
SVGA成本
- SVGA目不支持种类：
- 不支持复杂的矢量形状图层
- AE自带的渐变、生成、描边、擦除…
- 对设计工具原生动画不友好，对图片动画友好(适合映客礼物场景)
- 导出工具开源

常用参数说明

SVGA.Player 用于控制动画的播放和停止

SVGA.Parser 用于加载远端或 Base64 动画，并转换成 VideoItem。

player方法详解：

startAnimation（reverse：boolean = false）; -从零帧开始动画。
startAnimationWithRange（范围：{位置：数字，长度：数字}，反向：布尔=假）; -在[位置，位置+长度]帧范围内开始动画。
pauseAnimation（）; -在当前帧上暂停动画。
stopAnimation（）; -停止动画，在clearsAfterStop === true时清除内容
setContentMode（mode：“ Fill” |“ AspectFill” |“ AspectFit”）; -特定比例模式
setClipsToBounds（clipsToBounds：boolean）; -如果开箱即用，则剪辑。
明确（）; -强制清除内容。
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]）; -动态替换动画图像，变换是可选的，变换可以调整替换图像。
setText（text：string | {text：string，family：string，size：string，color：string，offset：{x：float，y：float}}，forKey：string）; -在动画图像上动态添加文本
clearDynamicObjects（）; -清除所有动态对象
player回调详解：

onFinished（callback：（）=> void）：无效; -动画停止后调用。
onFrame（callback：（frame：number）：void）：void; -在渲染动画特定帧后调用。
onPercentage（回调：（百分比：数字）：无效）：无效; -渲染特定动画百分比后调用。
SVGA解析器：

您使用SVGA.Parser从远程或Base64字符串加载VideoItem。

只能加载跨域允许文件。

如果您希望从Base64或File加载资源，请以load(File)或交付load(‘data:svga/2.0;base64,xxxxxx’)。

所以不能使用本地的svga

解决办法：

1、上传到服务器上，远程访问

2、本地开启一个服务，然后引入（http://127.0.0.1:xxx/xxxx）