Android實現(xiàn)流動的漸變色邊框效果
前言
記得在介紹 motion_toast 一篇的時候,開篇有一張動圖,邊框是漸變色而且感覺是流動的。這個動效挺有趣的,當時也有人問怎么實現(xiàn),經(jīng)過上一篇《讓你的聊天氣泡豐富多彩!》后,有了實現(xiàn)思路了。
實現(xiàn)思路
首先要實現(xiàn)但是漸變色邊框,這個其實可以參考上一篇的CustomPaint
的漸變填充實現(xiàn)。繪制一個矩形邊框,然后讓漸變色的區(qū)域填充到矩形區(qū)域內(nèi)就可以了。
void paint(Canvas canvas, Size size) { final rectWidth = 300.0, rectHeight = 100.0; Rect rect = Offset( size.width / 2 - rectWidth / 2, size.height / 2 - rectHeight / 2) & Size(rectWidth, rectHeight); final paint = Paint() ..shader = LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: colors, ), ).createShader(rect) ..style = PaintingStyle.stroke ..strokeWidth = 8.0; canvas.drawRect(rect, paint); }
繪制出來的效果如下圖所示。
然后是讓漸變色流動起來,這里就需要動畫了,通過動畫控制漸變填充的角度,周而復始就能夠形成不斷流動的效果。這里還是要用到 LinearGradient
的transform
屬性。Flutter 內(nèi)置了一個GradientRotation
旋轉(zhuǎn)變換的類,正好可以進行角度變換實現(xiàn)角度控制,GradientRotation 接收一個角度值實現(xiàn)對漸變的角度控制,下面是0度和90度的對比圖,可以看到0度到90度邊框的漸變色起始位置正好是旋轉(zhuǎn)了90度。
有了以上兩個基礎(chǔ),我們通過一個 Animation 對象動畫過程中的值來控制旋轉(zhuǎn)角度就可以了。
void paint(Canvas canvas, Size size) { final rectWidth = 300.0, rectHeight = 100.0; Rect rect = Offset( size.width / 2 - rectWidth / 2, size.height / 2 - rectHeight / 2) & Size(rectWidth, rectHeight); final paint = Paint() ..shader = LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: colors, transform: GradientRotation( animation * 2 * pi, ), //改變 transform 值實現(xiàn)漸變旋轉(zhuǎn)效果 ).createShader(rect) ..style = PaintingStyle.stroke ..strokeWidth = 8.0; canvas.drawRect(rect, paint); }
動畫配置代碼如下,2秒旋轉(zhuǎn)一周,使用 Curves.linear
實現(xiàn)勻速旋轉(zhuǎn)。
class _GradientBoundDemoState extends State<GradientBoundDemo> with SingleTickerProviderStateMixin { late Animation<double> animation; late AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); animation = Tween<double>(begin: 0, end: 1.0).animate(CurvedAnimation( parent: controller, curve: Curves.linear, )) ..addListener(() { setState(() {}); }); controller.repeat(); } //... }
實現(xiàn)的效果如下所示。
調(diào)整一下顏色和 LinearGradient
的 begin
和 end
參數(shù),還可以實現(xiàn)一些有趣的效果。下面這個效果就和開篇那個效果有點接近了。
如果是畫成圓圈邊框的話,做 Loading 效果其實也不錯。
源碼已經(jīng)提交至:繪圖相關(guān)源碼,文件名為:gradient_bound_demo.dart
。
總結(jié)
本篇介紹了自定義繪制漸變色邊框,并通過動畫實現(xiàn)流動的效果,繪圖加動畫組合能夠?qū)崿F(xiàn)很多既有創(chuàng)意又有取的效果,大家也可以嘗試一下看看有哪些有趣的玩法。
到此這篇關(guān)于Android實現(xiàn)流動的漸變色邊框效果的文章就介紹到這了,更多相關(guān)Android漸變色邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android 分析實現(xiàn)性能優(yōu)化之啟動速度優(yōu)化
在移動端程序中,用戶希望的是應用能夠快速打開。啟動時間過長的應用不能滿足這個期望,并且可能會令用戶失望。輕則鄙視你,重則直接卸載你的應用2021-11-11Android開發(fā)實現(xiàn)各種圖形繪制功能示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)各種圖形繪制功能,結(jié)合實例形式分析了Android圖形繪制常用的組件、函數(shù)使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-09-09Android Studio報:“Attribute application@theme or @ icon ”問題的解
這篇文章主要給大家介紹了關(guān)于Android Studio報:“Attribute application@theme or @ icon ”問題的解決方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。2017-12-12