介紹 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天，寫完。
lottie 0.6.0
前端動畫解決方案 - Lottie
Flutter — 使用 Lottie 製作 Splash Page
Fish-Lottie：纯Dart如何实现一个高性能动画框架？ / zhihu
airbnb/lottie-web
airbnb/lottie-android
airbnb/lottie-ios
【分享】如何使用Lottie 將完美動畫100%呈現在產品上