Android Flutter实战之为照片添加颜色滤镜

作者:岛上码农 时间:2023-05-17 01:27:12 

前言

我们之前讲述的动画都需要主动触发或者是重复执行,那有没有自己触发动画的组件呢?这样我们就可以在 StatelessWidget 里直接使用了。答案是有的,那就是 TweenAnimationBuilder 组件。本篇我们就利用TweenAnimationBuilder来实现一个图片调色的过渡动画,效果如下所示,滑动一次滑块,颜色逐渐从偏绿色变到偏橙色,然后再滑动一次又恢复之前的色调。

Android Flutter实战之为照片添加颜色滤镜

TweenAnimationBuilder介绍

TweenAnimationBuilder是一个自带过渡动画效果的组件,构造方法定义如下:

const TweenAnimationBuilder({
 Key? key,
 required this.tween,
 required Duration duration,
 Curve curve = Curves.linear,
 required this.builder,
 VoidCallback? onEnd,
 this.child,
})

其中 durationcurveonEnd 我们在之前的动画组件介绍过了,这里不再赘述。其他2个参数说明如下:

  • tweenTwee<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了。

应用

回到我们之前的效果,我们要实现颜色滤镜的效果,需要应用到另一个组件 ColorFilteredColorFiltered使用 指定的 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

标签:Android,Flutter,颜色,滤镜
0
投稿

猜你喜欢

  • Java基于LoadingCache实现本地缓存的示例代码

    2022-08-28 12:05:04
  • Android入门之计时器Chronometer的使用教程

    2023-09-06 10:56:43
  • 基于ClasspathResource路径问题的解决

    2022-03-29 21:23:22
  • SpringBoot集成Swagger构建api文档的操作

    2023-11-03 09:13:51
  • Android开发Jetpack组件WorkManager用例详解

    2023-05-09 03:27:07
  • Java中的传值与传引用实现过程解析

    2023-02-21 12:59:41
  • SpringBoot集成yitter-idgenerator(雪花漂移)分布式Id自增的实现

    2022-03-27 10:47:08
  • Java的MyBatis框架中实现多表连接查询和查询结果分页

    2022-10-29 08:49:21
  • C#中线程同步对象的方法分析

    2021-06-06 05:43:46
  • C#用RabbitMQ实现消息订阅与发布

    2022-09-05 16:23:40
  • Android开发apk反编译和二次打包教程

    2022-09-19 12:01:16
  • 详解spring boot集成RabbitMQ

    2022-06-25 17:56:07
  • Kotlin的::符号怎么用

    2022-07-13 22:59:37
  • c#委托详解和和示例分享

    2022-10-26 12:29:41
  • SpringBoot中@ConfigurationProperties注解实现配置绑定的三种方法

    2023-03-19 12:36:25
  • Android深入浅出之Binder机制

    2021-07-06 01:47:21
  • SpringBoot利用注解来实现Redis分布式锁

    2022-02-13 16:57:36
  • android仿支付宝、微信密码输入框效果

    2021-12-23 12:59:16
  • Android编程之交互对话框实例浅析

    2021-09-09 04:47:08
  • 简介Java的Hibernate框架中的Session和持久化类

    2023-04-17 14:41:13
  • asp之家 软件编程 m.aspxhome.com