Android Flutter實現(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
:動畫完成后的組件,默認是返回一個具有樣式修飾的文字。
總結(jié)
animated_text_kit 是一個非常受歡迎的文字動畫庫,在 pub上收獲了超過2000個喜歡,Github 上貢獻者22人,收獲了1.2k Star,可以說十分強大的。更重要的是它的使用非常簡潔,文檔完善,基本上拿來即用,喜歡的朋友趕緊用起來,讓你的文字酷炫起來!
以上就是Android Flutter實現(xiàn)五種酷炫文字動畫效果詳解的詳細內(nèi)容,更多關于Android Flutter文字動畫的資料請關注腳本之家其它相關文章!
相關文章
android上一個可追蹤代碼具體到函數(shù)某行的日志類
追蹤代碼到函數(shù)具體某行,這樣的功能,是每一個程序員都希望會有的,因為它可以幫助我們追蹤到某行代碼的錯誤,接下來介紹下android上一個可追蹤代碼到函數(shù)具體某行的日志類,希望對開發(fā)者有所幫助2012-12-12View中如何進行手勢識別onFling動作實現(xiàn)介紹
下面我們就以實現(xiàn)手勢識別的onFling動作,在CwjView中我們從View類繼承,當然大家可以從TextView等更高層的界面中實現(xiàn)觸控,感興趣的朋友可以了解下哈2013-06-06Android中通過RxJava進行響應式程序設計的入門指南
響應式編程在Android中的運用是非常犀利的,比如在異常處理和調(diào)度器方面,這里我們將從生命周期等方面來講解Android中通過RxJava進行響應式程序設計的入門指南:2016-06-06Androd 勇闖高階性能優(yōu)化之布局優(yōu)化篇
Android性能優(yōu)化方面也有很多文章了,這里就做一個總結(jié),從原理到方法,工具等做一個簡單的了解,從而可以慢慢地改變編碼風格,從而提高性能2021-10-10Android編程實現(xiàn)ActionBar的home圖標動畫切換效果
這篇文章主要介紹了Android編程實現(xiàn)ActionBar的home圖標動畫切換效果,涉及Android布局、樣式、Activity及菜單相關操作技巧,需要的朋友可以參考下2017-01-01Android 推送原理(Android Push Notification)詳解
這篇文章主要介紹了Android 推送原理(Android Push Notification)詳解的相關資料,這里對Android 推送的原理做了簡單的介紹,需要的朋友可以參考下2016-11-11簡單掌握Android開發(fā)中彩信的發(fā)送接收及其附件的處理
這篇文章主要介紹了簡單掌握Android開發(fā)中彩信的發(fā)送接收及其附件的處理,由于微信的流行,使用彩信的用戶已經(jīng)很少了,簡單了解即可,需要的朋友可以參考下2016-02-02