Android Flutter實現(xiàn)五種酷炫文字動畫效果詳解

更新時間：2022年03月24日 11:24:10 作者：島上碼農(nóng)

animated_text_kit這一動畫庫有多種文字動畫效果，文中將利用它實現(xiàn)五種酷炫的文字動畫：波浪涌動效果、波浪線跳動文字組、彩虹動效、滾動廣告牌效果和打字效果，需要的可以參考一下

前言

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

波浪涌動效果

波浪涌動

上面的動畫效果只需要下面幾行代碼，其中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,
??????),
????);
??}

波浪線跳動文字組

波浪跳動文字

文字按波浪線跳動的感覺是不是很酷，而且還支持文字組哦，可以實現(xiàn)多行文字依次動起來！代碼也只有幾行，其中repeatForever代表動畫是否一直重復，如果為否的話，按設定次數(shù)重復（默認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 數(shù)組配置，而文字自身的參數(shù)（如字體、尺寸、粗細等）依舊可以保留。代碼如下所示：

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("文字點擊事件");
??????},
????),
??);
}

滾動廣告牌效果

滾動文字

一行文字像滾動廣告牌那樣滾動下來，非常適合做一些動態(tài)信息的播報。代碼如下：

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,
??????),
????),
??);
}

打字效果

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

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,
??????),
????),
??);
}

其他效果

animated_text_kit 還提供了其他文字動效，如下所示：

漸現(xiàn)效果（Fade）
打字機效果（Typewriter）
縮放效果（Scale）
閃爍效果（Flicker）

自定義效果

支持自定義效果，只需要動效類繼承AnimatedText，然后重載下面的方法就可以了：

構(gòu)造方法：通過構(gòu)造方法配置動效參數(shù)
initAnimation：初始化 Animation 對象，并將其與 AnimationController 綁定；
animatedBuilder：動效組件構(gòu)建方法，根據(jù) AnimationController 的值構(gòu)建當前狀態(tài)的組件；
completeText：動畫完成后的組件，默認是返回一個具有樣式修飾的文字。