SVGAPlayer-Flutter 轻量级动画渲染库 - 文章教程

SVGAPlayer-Flutter 轻量级动画渲染库

发布于 2021-09-15 字数 4246 浏览 719 评论 0

SVGAPlayer 是一个轻量的动画渲染库。你可以使用工具Adobe Animate CC 或者 Adobe After Effects 中导出动画文件,然后使用 SVGAPlayer 在移动设备上渲染并播放。

SVGAPlayer-Flutter 通过 Flutter CustomPainter 原生渲染动画,为您带来高性能,低成本的动画体验。

如果你想要了解更多细节,请访问官方网站

  • SVGAPlayer-Flutter 只支持 2.0 版本格式.

用法

我们在这里介绍 SVGAPlayer-Flutter 的用法。想要知道如何导出动画,点击这里

添加依赖

dependencies:
  svgaplayer_flutter: ^2.0.0  #latest version

放置 svga 文件

SVGAPlayer 可以从本地 assets 目录,或者远端服务器上加载动画文件。

简易用法

使用 SVGASimpleImage 组件进行动画渲染是最简单的。

class MyWidget extends Widget {

  @override
  Widget build(BuildContext context) {
  return Container(
    child: SVGASimpleImage(
      resUrl: "https://hub.fastgit.org/yyued/SVGA-Samples/blob/master/angel.svga?raw=true"),
  );
  }

}

动画将会循环播放,如果你希望更直接地控制动画,可以使用代码方式。

使用代码

为了控制动画的渲染操作,你需要创建一个 SVGAAnimationController 实例,这和普通的 Flutter 动画并没有什么区别。将这个实例赋予 SVGAImage,使用 SVGAParser 加载并解码资源,然后使用 Controller 播放动画。

import 'package:flutter/material.dart';
import 'package:svgaplayer_flutter/svgaplayer_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  SVGAAnimationController animationController;

  @override
  void initState() {
  this.animationController = SVGAAnimationController(vsync: this);
  this.loadAnimation();
  super.initState();
  }

  @override
  void dispose() {
  this.animationController.dispose();
  super.dispose();
  }

  void loadAnimation() async {
  final videoItem = await SVGAParser.shared.decodeFromURL(
    "https://hub.fastgit.org/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
  this.animationController.videoItem = videoItem;
  this
    .animationController
    .repeat() // Try to use .forward() .reverse()
    .whenComplete(() => this.animationController.videoItem = null);
  }

  @override
  Widget build(BuildContext context) {
  return Container(
    child: SVGAImage(this.animationController),
  );
  }
}

复用 MovieEntity

MovieEntity 对象会在 AnimationController dispose 调用后,或 AnimationController::videoItem 赋值后,执行 dispose 操作。

在 dispose 以后 MovieEntity 不可复用。

如果你需要复用 MovieEntity 对象,赋值 MovieEntity::autoreleasefalse 即可。

final videoItem = await SVGAParser.shared.decodeFromURL(
    "https://hub.fastgit.org/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
videoItem.autorelease = false;

当不再需要使用资源时,你需要自行调用 MovieEntity::dispose() 方法。

缓存

动画库不会管理任何缓存,你需要使用 dio 等网络库自行处理。

使用 SVGAParser.decodeFromBytes 方法解码数据。

功能示例

项目地址:https://github.com/svga/SVGAPlayer-Flutter

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

发布评论

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

支持 Markdown 语法,需要帮助?

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

关于作者

JSmiles

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

2414 文章
28 评论
64880 人气
更多

推荐作者

qq_81h7fk

文章 0 评论 0

Aik

文章 0 评论 0

爱上歆随懿恫

文章 0 评论 0

qq_rvKjBH

文章 0 评论 0