Android Flutter实战之为照片添加颜色滤镜
作者:岛上码农 发布时间:2023-05-17 01:27:12
前言
我们之前讲述的动画都需要主动触发或者是重复执行,那有没有自己触发动画的组件呢?这样我们就可以在 StatelessWidget
里直接使用了。答案是有的,那就是 TweenAnimationBuilder
组件。本篇我们就利用TweenAnimationBuilder
来实现一个图片调色的过渡动画,效果如下所示,滑动一次滑块,颜色逐渐从偏绿色变到偏橙色,然后再滑动一次又恢复之前的色调。
TweenAnimationBuilder介绍
TweenAnimationBuilder
是一个自带过渡动画效果的组件,构造方法定义如下:
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个参数说明如下:
tween
:Twee<T>
类型,动画过程中会把Tween
的中间插值传给builder
来构建子组件,从而可以实现过渡动画效果。builder
:组件构建方法,类型为ValueWidgetBuilder<T>
,具体定义如下,其中value
参数就是tween
动画过程中的中间插值。也就是我们在动画期间,会不断调用builder
重新绘制子组件。
typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value, Widget? child);
对应的源码可以看出实现方式,在初始化的时候,如果起始值和结束值不一致就会启动动画。
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);
}
}
有了这个基础之后,就可以来应用TweenAnimationBuilder
了。
应用
回到我们之前的效果,我们要实现颜色滤镜的效果,需要应用到另一个组件 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
对象就可以实现颜色过渡的动效了。这里我们用了一个 Slider
组件,当滑动到不同的位置时,更改其中的红色成分,就可以通过滑动滑块的位置进行调节颜色滤镜了,小姐姐的照片也能有不同的风格了。完整代码如下:
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());
});
},
)
],
),
),
);
}
}
来源:https://juejin.cn/post/7021133767288815647
猜你喜欢
- 闲来无事,刚学会把git部署到远程服务器,没事做,所以简单做了一个抓取网页信息的小工具,里面的一些数值如果设成参数的话可能扩展性能会更好!希
- 一、项目简述(+需求文档+PPT)功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能。二、项目运行环境配置:Jdk1.8 +
- Java线程的生命周期的详解对于多线程编程而言,理解线程的生命周期非常重要,本文就针对这一点进行讲解。一、线程的状态线程的存在有几种不同的状
- 感想:第一次写博客,感觉编辑器挺复杂厉害的,感觉自己的内容挺简单的。有什么问题请多多指教!思路:1、创建一个扑克牌的实体类Poker,设置了
- ListView 和ScroolView同时使用计算高度时onmeasure报空指针的解决办法前言:虽然Android 的设计者始终认为Li
- 1. 导入依赖包// retrofit, 基于Okhttp,考虑到项目中经常会用到retrofit,就导入这个了。 compil
- 在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Microsoft .Net Framework的
- 概述从今天开始, 小白我将带大家开启 Jave 数据结构 & 算法的新篇章.链表链表 (Linked List) 是一种递归的动态数
-   利用 springboot + redis 实现过滤重复提交的请求,业务流程如下所示,首先定义一个拦
- 一、为什么需要GC应用程序对资源操作,通常简单分为以下几个步骤:1、为对应的资源分配内存2、初始化内存3、使用资源4、清理资源5、释放内存应
- Android 双击Back键退出应用的实现方法实现原理:双击退出程序的原理无非就是设置一个退出标识(询问是否退出),如果改变了这个标识(确
- 首先!首先!首先!首先,我们由于历史问题,项目用的UI编辑器不是大众使用的GUI或者NGUI, 而是使用不知道算不算小众的FairyGUI,
- Java中的BigDecimal类的使用:使用Java中的BigDecimal可以进行精确的计算,但是在使用BigDecimal时我们需要注
- strcpy函数详解如下1.函数介绍1.1.函数接口char * __cdecl strcpy(char * dst, const char
- 本文实例为大家分享了Android实现屏幕保持常亮的具体代码,供大家参考,具体内容如下一、需求背景当我们在玩游戏或者看视频的时候不希望app
- 首先,在main方法的类上添加注解:@ServletComponentScan(basePackages = "applicati
- 最近为公司做的一个Demo里面用到了ScrollView嵌套了GridView和ListView,然而在嵌套的时候我发现GridView和L
- 本文实例为大家分享了用javaMail实现发送邮件的具体代码,供大家参考,具体内容如下通过javamail发送邮件,代码如下:导入maven
- BufferedReaderBufferedReader 是缓冲字符输入流。它继承于Reader。 BufferedReader 的作用是为
- 参考链接:狂神的Swagger笔记号称世界上最流行的API框架Restful Api 文档在线自动生成器 => API 文档 与API