Flutter給控件實(shí)現(xiàn)鉆石般的微光特效
效果圖
使用方法
Shimmer( baseColor: const Color(0x08ffffff), // 背景顏色 highlightColor: Colors.white, // 高光的顏色 loop: 2, // 閃爍循環(huán)次數(shù),不傳默認(rèn)一直循環(huán) child: Image.asset('assets/images/watermelon.png',width: 325, height: 260, fit: BoxFit.contain), )
實(shí)現(xiàn)原理
① 特效控件分為兩層:底層顯示調(diào)用方傳入的控件;上層覆蓋一層漸變著色器。
② 啟動(dòng)動(dòng)畫(huà),根據(jù)動(dòng)畫(huà)的進(jìn)度,對(duì)漸變著色器的區(qū)域進(jìn)行繪制,當(dāng)區(qū)域變大變小時(shí),著色器高光的地方也在相應(yīng)進(jìn)行偏移。
③ 同時(shí)著色器不能超出底層控件的繪制范圍,底層控件的形狀是不規(guī)則的,漸變層不能超出底層控件的layer對(duì)象。這樣才能實(shí)現(xiàn)完全貼合 底層控件形狀 的微光閃爍。
控件分層顯示
@override Widget build(BuildContext context) { return Stack( children: [ // 底層控件 widget.child, // 覆蓋閃爍微光 AnimatedBuilder( animation: _controller, child: widget.child, builder: (BuildContext context, Widget? child) => _Shimmer( child: child, percent: _controller.value, direction: widget.direction, gradient: widget.gradient, ), ) ], );
開(kāi)啟動(dòng)畫(huà)
late AnimationController _controller; int _count = 0; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: widget.duration) ..addStatusListener((AnimationStatus status) { if (status != AnimationStatus.completed) { return; } _count++; if (widget.loop != 0 && _count < widget.loop) { _controller.forward(from: 0.0); } }); if (widget.loop == 0) { _controller.repeat(); } else { _controller.forward(); } }
重點(diǎn):著色器該如何繪制,又該如何通過(guò)AnimationController的進(jìn)度進(jìn)行偏移?由于著色器不能超出底層控件的繪制范圍,所以必須拿到底層控件的繪制上下文【即 PaintingContext】,調(diào)用其pushLayer方法,讓引擎把著色器繪制上去。
需要用到PaintingContext,自然就需要去管理RenderObject,所以著色器的編寫(xiě)使用RenderProxyBox進(jìn)行計(jì)算并繪制出layer對(duì)象,計(jì)算的過(guò)程根據(jù)上面的AnimationController的進(jìn)度進(jìn)行計(jì)算。
class _ShimmerFilter extends RenderProxyBox { ShimmerDirection _direction; Gradient _gradient; double _percent; _ShimmerFilter(this._percent, this._direction, this._gradient); @override ShaderMaskLayer? get layer => super.layer as ShaderMaskLayer?; set percent(double newValue) { if (newValue != _percent) { _percent = newValue; markNeedsPaint(); } } set gradient(Gradient newValue) { if (newValue != _gradient) { _gradient = newValue; markNeedsPaint(); } } set direction(ShimmerDirection newDirection) { if (newDirection != _direction) { _direction = newDirection; markNeedsLayout(); } } @override void paint(PaintingContext context, Offset offset) { if (child != null) { final double width = child!.size.width; final double height = child!.size.height; Rect rect; double dx, dy; if (_direction == ShimmerDirection.rtl) { dx = _offset(width, -width, _percent); dy = 0.0; rect = Rect.fromLTWH(dx - width, dy, 3 * width, height); } else if (_direction == ShimmerDirection.ttb) { dx = 0.0; dy = _offset(-height, height, _percent); rect = Rect.fromLTWH(dx, dy - height, width, 3 * height); } else if (_direction == ShimmerDirection.btt) { dx = 0.0; dy = _offset(height, -height, _percent); rect = Rect.fromLTWH(dx, dy - height, width, 3 * height); } else { dx = _offset(-width, width, _percent); dy = 0.0; rect = Rect.fromLTWH(dx - width, dy, 3 * width, height); } layer ??= ShaderMaskLayer(); layer! ..shader = _gradient.createShader(rect) ..maskRect = offset & size ..blendMode = BlendMode.srcIn; context.pushLayer(layer!, super.paint, offset); } else { layer = null; } } double _offset(double start, double end, double percent) { return start + (end - start) * percent; } }
Render對(duì)象繪制出來(lái)后,需要封裝成widget使用,由于是單一組件,用SingleChildRenderObjectWidget即可。
class _Shimmer extends SingleChildRenderObjectWidget { @override _ShimmerFilter createRenderObject(BuildContext context) { return _ShimmerFilter(percent, direction, gradient); } @override void updateRenderObject(BuildContext context, _ShimmerFilter shimmer) { shimmer.percent = percent; shimmer.gradient = gradient; shimmer.direction = direction; } }
寫(xiě)在最后
這種閃爍動(dòng)畫(huà),應(yīng)用場(chǎng)景多種多樣。可以作為對(duì)重要視圖的著重顯示,例如:勛章;也可以作為加載中骨架屏的加載動(dòng)畫(huà)。自己靈活使用即可。
作為一個(gè)大前端開(kāi)發(fā)者,我希望把UI盡善盡美的展現(xiàn)給用戶(hù);此時(shí)你不僅需要一個(gè)集能力、審美、高標(biāo)準(zhǔn)于一體的設(shè)計(jì)師配合,更需要自己對(duì)所寫(xiě)界面有著極高的追求。而Flutter作為一個(gè)UI框架,玩到最后其實(shí)就是特效動(dòng)畫(huà)的高性能編寫(xiě),這勢(shì)必離不開(kāi)其繪制原理,不要停留在widget、element的學(xué)習(xí),Render、layer甚至再底層的C++才是我們學(xué)習(xí)路徑。
參考文檔:
總結(jié)
到此這篇關(guān)于Flutter給控件實(shí)現(xiàn)鉆石般的微光特效的文章就介紹到這了,更多相關(guān)Flutter控件微光特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android使用BottomNavigationBar實(shí)現(xiàn)底部導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Android使用BottomNavigationBar實(shí)現(xiàn)底部導(dǎo)航欄,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02Android應(yīng)用內(nèi)調(diào)用第三方應(yīng)用的方法
這篇文章主要介紹了Android應(yīng)用內(nèi)調(diào)用第三方應(yīng)用的方法,有需要的朋友可以參考一下2014-01-01Android動(dòng)態(tài)人臉檢測(cè)的示例代碼(臉數(shù)可調(diào))
本篇文章主要介紹了Android動(dòng)態(tài)人臉檢測(cè)的示例代碼(臉數(shù)可調(diào)),具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08Android中搜索圖標(biāo)和文字居中的EditText實(shí)例
本篇文章主要介紹了Android中搜索圖標(biāo)和文字居中的EditText實(shí)例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-06-06Android Studio實(shí)現(xiàn)第三方QQ登錄操作代碼
這篇文章主要介紹了Android Studio實(shí)現(xiàn)第三方QQ登錄的操作方法,本文圖文并茂給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12Android Canvas之drawBitmap方法案例詳解
這篇文章主要介紹了Android Canvas之drawBitmap方法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果(十)
這篇文章主要為大家詳細(xì)介紹了Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫(huà)效果的第十篇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08Android SQLite數(shù)據(jù)庫(kù)加密的操作方法
因?yàn)锳ndroid自帶的SQLite數(shù)據(jù)庫(kù)本身是沒(méi)有實(shí)現(xiàn)加密的,那我們?nèi)绾螌?shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的加密呢?今天通過(guò)本文給大家介紹下Android SQLite數(shù)據(jù)庫(kù)加密的操作方法,一起看看吧2021-09-09