今日要點
》前言
》介紹 lottie-flutter 專案
》下載並編譯 lottie-flutter 專案
》程式架構研究
前面有介紹Flare 【Day 19】Flare-Flutter - 來點 2D 動畫吧,今天要介紹另一個熱門的前端動畫方案。這是 Android 工程師跟我推薦的,真是教學相長。我又得到新知了。馬上就來研究一下看 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 專案囉。
% 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'),
],
),
),
);
}
}
看了程式碼我才發現原來有三個動畫,
分別用三種方式來截入檔案,非常方便的設計,作者很厲害。
再回去滑滑看其他動畫,哈
今天就先這樣吧。
好,第25天,寫完。
參考