SVGA Flutter v1.0 全新的动画格式

介绍

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

SVGAPlayer-Android 使用原生 Android Canvas 库渲染动画，为你提供高性能、低开销的动画体验。

若是你想要了解更多细节，请访问官方网站。

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

用法

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

添加依赖

dependencies:
  svgaplayer_flutter: ^0.0.1  #latest version
复制代码

放置 svga 文件

SVGAPlayer 能够从本地 assets 目录，或者远端服务器上加载动画文件。

简易用法

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

class MyWidget extends Widget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: SVGASimpleImage(
          resUrl: "https://github.com/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://github.com/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),
    );
  }
}
复制代码

缓存

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

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

功能示例

• 使用位图替换指定元素。
• 在指定元素上绘制文本。
• 隐藏指定元素。
• 在指定元素上自由绘制。