Android Flutter實(shí)現(xiàn)五種酷炫文字動(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)文章
android上一個(gè)可追蹤代碼具體到函數(shù)某行的日志類
追蹤代碼到函數(shù)具體某行,這樣的功能,是每一個(gè)程序員都希望會(huì)有的,因?yàn)樗梢詭椭覀冏粉櫟侥承写a的錯(cuò)誤,接下來(lái)介紹下android上一個(gè)可追蹤代碼到函數(shù)具體某行的日志類,希望對(duì)開發(fā)者有所幫助2012-12-12Android 頂部標(biāo)題欄隨滑動(dòng)時(shí)的漸變隱藏和漸變顯示效果
這篇文章主要介紹了Android 頂部標(biāo)題欄隨滑動(dòng)時(shí)的漸變隱藏和漸變顯示效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06View中如何進(jìn)行手勢(shì)識(shí)別onFling動(dòng)作實(shí)現(xiàn)介紹
下面我們就以實(shí)現(xiàn)手勢(shì)識(shí)別的onFling動(dòng)作,在CwjView中我們從View類繼承,當(dāng)然大家可以從TextView等更高層的界面中實(shí)現(xiàn)觸控,感興趣的朋友可以了解下哈2013-06-06ListView-添加item的事件監(jiān)聽實(shí)例
下面小編就為大家?guī)?lái)一篇ListView-添加item的事件監(jiān)聽實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07Android中通過(guò)RxJava進(jìn)行響應(yīng)式程序設(shè)計(jì)的入門指南
響應(yīng)式編程在Android中的運(yùn)用是非常犀利的,比如在異常處理和調(diào)度器方面,這里我們將從生命周期等方面來(lái)講解Android中通過(guò)RxJava進(jìn)行響應(yīng)式程序設(shè)計(jì)的入門指南:2016-06-06Androd 勇闖高階性能優(yōu)化之布局優(yōu)化篇
Android性能優(yōu)化方面也有很多文章了,這里就做一個(gè)總結(jié),從原理到方法,工具等做一個(gè)簡(jiǎn)單的了解,從而可以慢慢地改變編碼風(fēng)格,從而提高性能2021-10-10Android編程實(shí)現(xiàn)ActionBar的home圖標(biāo)動(dòng)畫切換效果
這篇文章主要介紹了Android編程實(shí)現(xiàn)ActionBar的home圖標(biāo)動(dòng)畫切換效果,涉及Android布局、樣式、Activity及菜單相關(guān)操作技巧,需要的朋友可以參考下2017-01-01Android 推送原理(Android Push Notification)詳解
這篇文章主要介紹了Android 推送原理(Android Push Notification)詳解的相關(guān)資料,這里對(duì)Android 推送的原理做了簡(jiǎn)單的介紹,需要的朋友可以參考下2016-11-11簡(jiǎn)單掌握Android開發(fā)中彩信的發(fā)送接收及其附件的處理
這篇文章主要介紹了簡(jiǎn)單掌握Android開發(fā)中彩信的發(fā)送接收及其附件的處理,由于微信的流行,使用彩信的用戶已經(jīng)很少了,簡(jiǎn)單了解即可,需要的朋友可以參考下2016-02-02