欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年03月24日 11:24:10   作者：島上碼農(nóng)  
animated_text_kit這一動(dòng)畫庫(kù)有多種文字動(dòng)畫效果，文中將利用它實(shí)現(xiàn)五種酷炫的文字動(dòng)畫：波浪涌動(dòng)效果、波浪線跳動(dòng)文字組、彩虹動(dòng)效、滾動(dòng)廣告牌效果和打字效果，需要的可以參考一下

前言

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

波浪涌動(dòng)效果

波浪涌動(dòng)

上面的動(dòng)畫效果只需要下面幾行代碼，其中loadUntil用于控制波浪最終停留的高度，取值是0-1.0，如果是1.0則會(huì)覆蓋滿整個(gè)文字，不足1.0的時(shí)候會(huì)在文字上一直顯示波浪涌動(dòng)的效果。這種效果用來(lái)做頁(yè)面加載到時(shí)候比干巴巴地顯示個(gè)“加載中”有趣多了！

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

波浪線跳動(dòng)文字組

波浪跳動(dòng)文字

文字按波浪線跳動(dòng)的感覺是不是很酷，而且還支持文字組哦，可以實(shí)現(xiàn)多行文字依次動(dòng)起來(lái)！代碼也只有幾行，其中repeatForever代表動(dòng)畫是否一直重復(fù)，如果為否的話，按設(shè)定次數(shù)重復(fù)（默認(rèn)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("文字點(diǎn)擊事件");
??????},
????),
??);
}

彩虹動(dòng)效

彩虹文字動(dòng)效

一道彩虹滑過(guò)文字，最終留下漸變的效果，瞬間讓文字豐富多彩！動(dòng)效的顏色可以通過(guò)一個(gè)Color 數(shù)組配置，而文字自身的參數(shù)（如字體、尺寸、粗細(xì)等）依舊可以保留。代碼如下所示：

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

滾動(dòng)廣告牌效果

滾動(dòng)文字

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

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("點(diǎn)擊事件");
????????},
????????repeatForever:?true,
??????),
????),
??);
}

打字效果

打字效果

一個(gè)個(gè)文字像敲擊鍵盤一樣出現(xiàn)在屏幕上，如果配送機(jī)械鍵盤“啪啦啪啦”的聲音，簡(jiǎn)直就感覺是真的在敲代碼一樣！代碼一樣很簡(jiǎ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("文字點(diǎn)擊事件");
????????},
????????repeatForever:?true,
??????),
????),
??);
}

其他效果

animated_text_kit 還提供了其他文字動(dòng)效，如下所示：

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

自定義效果

支持自定義效果，只需要?jiǎng)有ь惱^承AnimatedText，然后重載下面的方法就可以了：

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

總結(jié)

animated_text_kit 是一個(gè)非常受歡迎的文字動(dòng)畫庫(kù)，在 pub上收獲了超過(guò)2000個(gè)喜歡，Github 上貢獻(xiàn)者22人，收獲了1.2k Star，可以說(shuō)十分強(qiáng)大的。更重要的是它的使用非常簡(jiǎn)潔，文檔完善，基本上拿來(lái)即用，喜歡的朋友趕緊用起來(lái)，讓你的文字酷炫起來(lái)！

以上就是Android Flutter實(shí)現(xiàn)五種酷炫文字動(dòng)畫效果詳解的詳細(xì)內(nèi)容，更多關(guān)于Android Flutter文字動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論