iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
0
Mobile Development

「Google Flutter」學習筆記系列 第 25

【Day 25】lottie-flutter - 前端動畫的專案

今日要點
》前言
》介紹 lottie-flutter 專案
》下載並編譯 lottie-flutter 專案
》程式架構研究


前言

前面有介紹Flare 【Day 19】Flare-Flutter - 來點 2D 動畫吧,今天要介紹另一個熱門的前端動畫方案。這是 Android 工程師跟我推薦的,真是教學相長。我又得到新知了。馬上就來研究一下看 flutter 有沒有相關的教學,整理一下筆記。

介紹 lottie-flutter 專案

Lottie是一個由Airbnb開源動畫方案,它以JSON的方式解決了開發者對複雜動畫實現的開發成本問題。 Lottie 是適用於 Android 和 iOS 的 library 也適用於macOS 和 Web。它可以使用 Bodymovin 擴充程式解析 Adobe After Effects動畫導出的 json 格式檔,並在移動設備上進行原生渲染!

今天要介紹的Github專案,lottie-flutter 可以把 lottie 做好的動畫放進你的 Flutter 專案中,並且可以用程式去控制它。xvrh/lottie-flutter 286 的星星。

嗯,他在 README.md 沒有放畫面,沒關係,等一下我們用他的範例專案來看看。

下載並編譯 lottie-flutter 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 lottie-flutter 專案囉。

% git clone https://github.com/xvrh/lottie-flutter.git

Cloning into 'lottie-flutter'...
remote: Enumerating objects: 424, done.
remote: Counting objects: 100% (424/424), done.
remote: Compressing objects: 100% (392/392), done.
remote: Total 2748 (delta 97), reused 330 (delta 23), pack-reused 2324
Receiving objects: 100% (2748/2748), 28.00 MiB | 6.32 MiB/s, done.
Resolving deltas: 100% (1181/1181), done.


% cd lottie-flutter/example  
% flutter pub get

Running "flutter pub get" in example...     3.0s

試 build 一下,

% flutter run -d all


ok,一次成功 Android 執行起來了,iOS也OK。


動畫的效果。

程式架構研究

Main.dart : MaterialApp

在 VSCode 的樣子

程式碼很短,那我就貼一下好了,

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            // Load a Lottie file from your assets
            Lottie.asset('assets/LottieLogo1.json'),

            // Load a Lottie file from a remote url
            Lottie.network(
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

            // Load an animation and its images from a zip file
            Lottie.asset('assets/lottiefiles/angel.zip'),
          ],
        ),
      ),
    );
  }
}

看了程式碼我才發現原來有三個動畫,
分別用三種方式來截入檔案,非常方便的設計,作者很厲害。

  • 從本地的 assets 目錄載入 Lottie json檔
  • 從網址載入 Lottie json檔
  • 從本地的 assets 目錄載入 zip檔

再回去滑滑看其他動畫,哈

今天就先這樣吧。

好,第25天,寫完。

參考


上一篇
【Day 24】flutterfire - firebase_ml_vision 辨識專案-2-CameraPreviewScanner
下一篇
【Day 26】FlutterEbookApp - 精美完整的電子書專案
系列文
「Google Flutter」學習筆記30

尚未有邦友留言

立即登入留言