Android Flutter實戰(zhàn)之為照片添加顏色濾鏡
前言
我們之前講述的動畫都需要主動觸發(fā)或者是重復執(zhí)行,那有沒有自己觸發(fā)動畫的組件呢?這樣我們就可以在 StatelessWidget
里直接使用了。答案是有的,那就是 TweenAnimationBuilder
組件。本篇我們就利用TweenAnimationBuilder
來實現(xiàn)一個圖片調(diào)色的過渡動畫,效果如下所示,滑動一次滑塊,顏色逐漸從偏綠色變到偏橙色,然后再滑動一次又恢復之前的色調(diào)。
TweenAnimationBuilder介紹
TweenAnimationBuilder
是一個自帶過渡動畫效果的組件,構(gòu)造方法定義如下:
const TweenAnimationBuilder({ Key? key, required this.tween, required Duration duration, Curve curve = Curves.linear, required this.builder, VoidCallback? onEnd, this.child, })
其中 duration
、curve
和 onEnd
我們在之前的動畫組件介紹過了,這里不再贅述。其他2個參數(shù)說明如下:
tween
:Twee<T>
類型,動畫過程中會把Tween
的中間插值傳給builder
來構(gòu)建子組件,從而可以實現(xiàn)過渡動畫效果。builder
:組件構(gòu)建方法,類型為ValueWidgetBuilder<T>
,具體定義如下,其中value
參數(shù)就是tween
動畫過程中的中間插值。也就是我們在動畫期間,會不斷調(diào)用builder
重新繪制子組件。
typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value, Widget? child);
對應的源碼可以看出實現(xiàn)方式,在初始化的時候,如果起始值和結(jié)束值不一致就會啟動動畫。
class _TweenAnimationBuilderState<T extends Object?> extends AnimatedWidgetBaseState<TweenAnimationBuilder<T>> { Tween<T>? _currentTween; @override void initState() { _currentTween = widget.tween; _currentTween!.begin ??= _currentTween!.end; super.initState(); if (_currentTween!.begin != _currentTween!.end) { controller.forward(); } } @override void forEachTween(TweenVisitor<dynamic> visitor) { assert( widget.tween.end != null, 'Tween provided to TweenAnimationBuilder must have non-null Tween.end value.', ); _currentTween = visitor(_currentTween, widget.tween.end, (dynamic value) { assert(false); throw StateError('Constructor will never be called because null is never provided as current tween.'); }) as Tween<T>?; } @override Widget build(BuildContext context) { return widget.builder(context, _currentTween!.evaluate(animation), widget.child); } }
有了這個基礎(chǔ)之后,就可以來應用TweenAnimationBuilder
了。
應用
回到我們之前的效果,我們要實現(xiàn)顏色濾鏡的效果,需要應用到另一個組件 ColorFiltered
。ColorFiltered
使用 指定的 ColorFilter
對象對子組件的每一個像素進行顏色過濾,實際上是插入了一個顏色層,從而看起來有濾鏡效果。比如我們要加一個橙色的濾鏡,可以這么做。注意濾鏡模式有很多種,具體可以查看 BlendMode
枚舉的說明。
ColorFiltered( colorFilter: ColorFilter.mode(Colors.orange, BlendMode.modulate), child: ClipOval( child: ClipOval( child: Image.asset( 'images/beauty.jpeg', width: 300, ), ), ), );
有了這個組件,那在 TweenAnimationBuilder
中使用 ColorTween
,然后在 builder
方法中,將 ColorFilter
的顏色改成 builder
接收到的 Color
對象就可以實現(xiàn)顏色過渡的動效了。這里我們用了一個 Slider
組件,當滑動到不同的位置時,更改其中的紅色成分,就可以通過滑動滑塊的位置進行調(diào)節(jié)顏色濾鏡了,小姐姐的照片也能有不同的風格了。完整代碼如下:
class TweenAnimationDemo extends StatefulWidget { TweenAnimationDemo({Key? key}) : super(key: key); @override _TweenAnimationDemoState createState() => _TweenAnimationDemoState(); } class _TweenAnimationDemoState extends State<TweenAnimationDemo> { var _sliderValue = 0.0; Color _newColor = Colors.orange; @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TweenAnimationBuilder'), brightness: Brightness.dark, backgroundColor: Colors.black, ), backgroundColor: Colors.black, body: Center( child: Column( children: [ TweenAnimationBuilder( tween: ColorTween( begin: Colors.white, end: _newColor, ), duration: Duration(seconds: 1), builder: (_, color, child) { return ColorFiltered( colorFilter: ColorFilter.mode(color as Color, BlendMode.modulate), child: ClipOval( child: ClipOval( child: Image.asset( 'images/beauty.jpeg', width: 300, ), ), ), ); }, ), Slider.adaptive( value: _sliderValue, onChanged: (value) { setState(() { _sliderValue = value; }); }, onChangeEnd: (value) { setState(() { _newColor = _newColor.withRed((value * 255).toInt()); }); }, ) ], ), ), ); } }
總結(jié)
本篇介紹了 TweenAnimationBuilder
的構(gòu)造方法、實現(xiàn)機制和應用,同時使用 ColorFiltered
組件實現(xiàn)了顏色濾鏡效果。TweenAnimationBuilder
還可以實現(xiàn)一些有趣的動畫,比如下面這個來回移動的球。
到此這篇關(guān)于Android Flutter實戰(zhàn)之為照片添加顏色濾鏡的文章就介紹到這了,更多相關(guān)Android Flutter顏色濾鏡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android中使用PagerSlidingTabStrip實現(xiàn)導航標題的示例
本篇文章主要介紹了Android中使用PagerSlidingTabStrip實現(xiàn)導航標題的示例,具有一定的參考價值,有興趣的可以了解一下。2017-01-01Android系統(tǒng)進程間通信(IPC)機制Binder中的Server和Client獲得Service Manager接
本文主要介紹Android IPC通信Binder中的Server和Client獲得Service Manager接口,這里詳細的說明了如何實現(xiàn)Service Manager接口,對研究Android源碼的朋友提供幫助,有需要的小伙伴可以參考下2016-08-08android 通過MediaRecorder實現(xiàn)簡單的錄音示例
本篇文章中主要介紹了android 通過MediaRecorder實現(xiàn)簡單的錄音示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-02-02Flutter開發(fā)技巧ListView去除水波紋方法示例
這篇文章主要為大家介紹了Flutter開發(fā)技巧ListView去除水波紋方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12Android開發(fā)實現(xiàn)ListView點擊展開收起效果示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)ListView點擊展開收起效果,結(jié)合實例形式分析了Android ListView控件的布局及事件響應相關(guān)操作技巧,需要的朋友可以參考下2019-03-03Andriod?Studio實現(xiàn)撥打電話和發(fā)送短信的示例代碼
這篇文章主要介紹了Andriod?Studio實現(xiàn)撥打電話和發(fā)送短信功能,Android?Studio中創(chuàng)建項目,然后在該項目中創(chuàng)建一個Module名稱為“IntentDial”,文章結(jié)合實例步驟給大家介紹的非常詳細,需要的朋友參考下吧2022-03-03Android自定義有限制區(qū)域圖例角度自識別涂鴉工具類
這篇文章主要為大家介紹了Android自定義有限制區(qū)域圖例角度自識別涂鴉工具類,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02