Android Flutter實現五種酷炫文字動畫效果詳解

2022-03-24 13:00:21

前言

偶然逛國外部落格，看到了一個介紹文字動畫的庫，進入 pub 一看，立馬就愛上這個動畫庫了，幾乎你能想到的文字動畫效果它都有！現在正式給大家安利一下這個庫：animated_text_kit。本篇我們介紹幾個酷炫的效果，其他的效果大家可以自行檢視官網檔案使用。

波浪湧動效果

波浪湧動

上面的動畫效果只需要下面幾行程式碼，其中loadUntil用於控制波浪最終停留的高度，取值是0-1.0，如果是1.0則會覆蓋滿整個文字，不足1.0的時候會在文字上一直顯示波浪湧動的效果。這種效果用來做頁面載入到時候比干巴巴地顯示個“載入中”有趣多了！

Widget liquidText(String text) {
    return SizedBox(
      width: 320.0,
      child: TextLiquidFill(
        text: text,
        waveColor: Colors.blue[400]!,
        boxBackgroundColor: Colors.redAccent,
        textStyle: TextStyle(
          fontSize: 80.0,
          fontWeight: FontWeight.bold,
        ),
        boxHeight: 300.0,
        loadUntil: 0.7,
      ),
    );
  }

波浪線跳動文字組

波浪跳動文字

文字按波浪線跳動的感覺是不是很酷，而且還支援文字組哦，可以實現多行文字依次動起來！程式碼也只有幾行，其中repeatForever代表動畫是否一直重複，如果為否的話，按設定次數重複（預設3次，可設定）。

Widget wavyText(List<String> texts) {
  return DefaultTextStyle(
    style: const TextStyle(
      color: Colors.blue,
      fontSize: 20.0,
    ),
    child: AnimatedTextKit(
      animatedTexts: texts.map((e) => WavyAnimatedText(e)).toList(),
      isRepeatingAnimation: true,
      repeatForever: true,
      onTap: () {
        print("文字點選事件");
      },
    ),
  );
}

彩虹動效

彩虹文字動效

一道彩虹滑過文字，最終留下漸變的效果，瞬間讓文字豐富多彩！動效的顏色可以通過一個Color 陣列設定，而文字自身的引數（如字型、尺寸、粗細等）依舊可以保留。程式碼如下所示：

Widget rainbowText(List<String> texts) {
  const colorizeColors = [
    Colors.purple,
    Colors.blue,
    Colors.yellow,
    Colors.red,
  ];

  const colorizeTextStyle = TextStyle(
    fontSize: 36.0,
    fontWeight: FontWeight.bold,
  );
  return SizedBox(
    width: 320.0,
    child: AnimatedTextKit(
      animatedTexts: texts
          .map((e) => ColorizeAnimatedText(
                e,
                textAlign: TextAlign.center,
                textStyle: colorizeTextStyle,
                colors: colorizeColors,
              ))
          .toList(),
      isRepeatingAnimation: true,
      repeatForever: true,
      onTap: () {
        print("文字點選事件");
      },
    ),
  );
}

捲動廣告牌效果

捲動文字

一行文字像捲動廣告牌那樣捲動下來，非常適合做一些動態資訊的播報。程式碼如下：

Widget rotateText(List<String> texts) {
  return SizedBox(
    width: 320.0,
    height: 100.0,
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 36.0,
        fontFamily: 'Horizon',
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
      child: AnimatedTextKit(
        animatedTexts: texts.map((e) => RotateAnimatedText(e)).toList(),
        onTap: () {
          print("點選事件");
        },
        repeatForever: true,
      ),
    ),
  );
}

打字效果

一個個文字像敲擊鍵盤一樣出現在螢幕上，如果配送機械鍵盤“啪啦啪啦”的聲音，簡直就感覺是真的在敲程式碼一樣！程式碼一樣很簡單！

Widget typerText(List<String> texts) {
  return SizedBox(
    width: 320.0,
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 30.0,
        color: Colors.blue,
      ),
      child: AnimatedTextKit(
        animatedTexts: texts
            .map((e) => TyperAnimatedText(
                  e,
                  textAlign: TextAlign.start,
                  speed: Duration(milliseconds: 300),
                ))
            .toList(),
        onTap: () {
          print("文字點選事件");
        },
        repeatForever: true,
      ),
    ),
  );
}