iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
0
Mobile Development

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

【Day 20】Animated-Text-Kit - 來點動感的文字訊息

今日要點
》介紹 Animated-Text-Kit 專案
》下載並編譯 Animated-Text-Kit 範例專案
》程式架構研究


介紹 Animated-Text-Kit 專案

今天要介紹的Github專案,Animated-Text-Kit 可以輕鬆做出文字動畫,讓文字動起來。aagarwal1012/Animated-Text-Kit 有 820 的星星 。

先看看他範例的 Rotate 運行畫面,來看看效果。

他一共提供8種型式的動態文字。

  • Rotate
  • Fade
  • Typer
  • Typewriter
  • Scale
  • Colorize
  • TextLiquidFill
  • Wavy

每一種在 README.md 中,使用方式都寫的很詳細。應該可以很順利的應用在專案中。

下載並編譯 Animated-Text-Kit 範例專案

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

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

% git clone https://github.com/aagarwal1012/Animated-Text-Kit.git

Cloning into 'Animated-Text-Kit'...
remote: Enumerating objects: 72, done.
remote: Counting objects: 100% (72/72), done.
remote: Compressing objects: 100% (58/58), done.
remote: Total 1125 (delta 32), reused 29 (delta 13), pack-reused 1053
Receiving objects: 100% (1125/1125), 9.05 MiB | 3.33 MiB/s, done.
Resolving deltas: 100% (580/580), done.


範例 example

% cd Animated-Text-Kit/example 
% flutter pub get

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

試 build 一下,

% flutter run -d all


ok,一次成功 Android 執行起來了,iOS也OK。
下面的播放鍵,可以切換動態文字的展示樣示,
Rotate 的樣式,字會由上往下一直重覆捲動。
Fade 淡入淡出,字會慢慢浮現


Typer 打字機的樣式,但可以換字體
Typewriter 傳統打字機的樣式


Scale 放大縮小文字
Colorize 把文字加上彩色


TextLiquidFill 液體注入波動效果
Wavy 波浪舞效果

上面的截圖看不太出效果,可以到 Github 去感受一下文字動態效果。

程式架構研究

Main.dart : MaterialApp

Main.dart : Scaffold

今天就先這樣吧。

好,第20天,寫完。

參考

Flutter: Wavy Liquid Animation for Text


上一篇
【Day 19】Flare-Flutter - 來點 2D 動畫吧
下一篇
【Day 21】Flutter-AI-Rubik-cube-Solver - 讓 flutter 幫你解魔術方塊?
系列文
「Google Flutter」學習筆記30

尚未有邦友留言

立即登入留言