SVGA Flutter v1.0 全新的動畫格式

YYDev發表於2019-11-26
SVGFlutter動畫

介紹

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 方法解碼資料。

功能示例

相關文章