使用Flutter给照片调个颜色滤镜动画

最新推荐文章于 2024-08-29 08:30:53 发布

岛上码农

最新推荐文章于 2024-08-29 08:30:53 发布

阅读量1.2k

点赞数

分类专栏： Flutter动画专题文章标签： flutter 跨平台移动端开发 ios 安卓

本文链接：https://blog.csdn.net/shuijian00/article/details/124329018

版权

本文通过Flutter的TransitionToColor组件，展示了如何创建一个图片调色过渡动画。在滑动滑块时，图片颜色从绿色渐变到橙色，再次滑动则恢复原色。文章详细解释了TransitionToColor的构造方法和工作原理，并给出了结合ColorFiltered组件实现滤镜效果的实例代码。

摘要由CSDN通过智能技术生成

前言

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

颜色滤镜.gif

`TweenAnimationBuilder`介绍

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

const TweenAnimationBuilder({
  Key? key,
  required this.tween,
  required Duration duration,
  Curve curve = Curves.linear,
  required this.builder,
  VoidCallb

了解本专栏