欧美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)論