iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
0
Mobile Development

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

【Day 19】Flare-Flutter - 來點 2D 動畫吧

今日要點
》介紹 Flare-Flutter 專案
》下載並編譯 Flare-Flutter 專案
》程式架構研究


介紹 Flare-Flutter 專案

Flare是一個可以線上製作向量動畫模型的網站,它的模型可以被 Flutter 使用,用程式碼進行操作,
今天要介紹的Github專案,Flare-Flutter 可以把 Flare 做好的動畫放進你的 Flutter 專案中,並且可以用程式去控制它。2d-inc/Flare-Flutter 2.3K 的星星,觀注度非常高。

先看看他範例的運行畫面。


下載並編譯 Flare-Flutter 專案

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

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

% git clone https://github.com/2d-inc/Flare-Flutter.git

Cloning into 'Flare-Flutter'...
remote: Enumerating objects: 108, done.
remote: Counting objects: 100% (108/108), done.
remote: Compressing objects: 100% (71/71), done.
remote: Total 4066 (delta 29), reused 84 (delta 23), pack-reused 3958
Receiving objects: 100% (4066/4066), 17.65 MiB | 963.00 KiB/s, done.
Resolving deltas: 100% (2679/2679), done.


範例 simple

% cd Flare-Flutter/example/simple 
% flutter pub get

Running "flutter pub get" in simple...     1.4s

試 build 一下,

% flutter run -d all


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


會一直重覆的變動。

範例 teddy

% cd Flare-Flutter/example/teddy 
% flutter pub get

Running "flutter pub get" in teddy...     1.7s

試 build 一下,

% flutter run -d all


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

程式架構研究

Main.dart : MaterialApp

今天就先這樣吧。

好,第19天,寫完。

參考

Flutter動畫之Flare的製作與使用
JHBitencourt/beautiful_timelines
Building an Interactive Login Screen with Flare & Flutter


上一篇
【Day 18】timeline_tile - 來個時間軸吧
下一篇
【Day 20】Animated-Text-Kit - 來點動感的文字訊息
系列文
「Google Flutter」學習筆記30

尚未有邦友留言

立即登入留言