快捷導(dǎo)航

Android Flutter實(shí)戰(zhàn)之為照片添加顏色濾鏡

更新時(shí)間：2022年12月09日 09:14:12 作者：島上碼農(nóng)

這篇文章我們將利用TweenAnimationBuilder來實(shí)現(xiàn)一個(gè)圖片調(diào)色的過渡動(dòng)畫，從而實(shí)現(xiàn)為照片添加顏色濾鏡的效果，感興趣的可以了解一下

前言

我們之前講述的動(dòng)畫都需要主動(dòng)觸發(fā)或者是重復(fù)執(zhí)行，那有沒有自己觸發(fā)動(dòng)畫的組件呢？這樣我們就可以在 StatelessWidget 里直接使用了。答案是有的，那就是 TweenAnimationBuilder 組件。本篇我們就利用TweenAnimationBuilder來實(shí)現(xiàn)一個(gè)圖片調(diào)色的過渡動(dòng)畫，效果如下所示，滑動(dòng)一次滑塊，顏色逐漸從偏綠色變到偏橙色，然后再滑動(dòng)一次又恢復(fù)之前的色調(diào)。

TweenAnimationBuilder介紹

TweenAnimationBuilder是一個(gè)自帶過渡動(dòng)畫效果的組件，構(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 我們在之前的動(dòng)畫組件介紹過了，這里不再贅述。其他2個(gè)參數(shù)說明如下：

tween：Twee<T>類型，動(dòng)畫過程中會把 Tween 的中間插值傳給 builder 來構(gòu)建子組件，從而可以實(shí)現(xiàn)過渡動(dòng)畫效果。
builder：組件構(gòu)建方法，類型為ValueWidgetBuilder<T>，具體定義如下，其中 value 參數(shù)就是 tween 動(dòng)畫過程中的中間插值。也就是我們在動(dòng)畫期間，會不斷調(diào)用builder 重新繪制子組件。

typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value, Widget? child);

對應(yīng)的源碼可以看出實(shí)現(xiàn)方式，在初始化的時(shí)候，如果起始值和結(jié)束值不一致就會啟動(dòng)動(dòng)畫。

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);
  }
}

有了這個(gè)基礎(chǔ)之后，就可以來應(yīng)用TweenAnimationBuilder了。

應(yīng)用

回到我們之前的效果，我們要實(shí)現(xiàn)顏色濾鏡的效果，需要應(yīng)用到另一個(gè)組件 ColorFiltered。ColorFiltered使用指定的 ColorFilter 對象對子組件的每一個(gè)像素進(jìn)行顏色過濾，實(shí)際上是插入了一個(gè)顏色層，從而看起來有濾鏡效果。比如我們要加一個(gè)橙色的濾鏡，可以這么做。注意濾鏡模式有很多種，具體可以查看 BlendMode 枚舉的說明。

ColorFiltered(
  colorFilter:
      ColorFilter.mode(Colors.orange, BlendMode.modulate),
  child: ClipOval(
    child: ClipOval(
      child: Image.asset(
        'images/beauty.jpeg',
        width: 300,
      ),
    ),
  ),
);

有了這個(gè)組件，那在 TweenAnimationBuilder 中使用 ColorTween，然后在 builder 方法中，將 ColorFilter 的顏色改成 builder 接收到的 Color 對象就可以實(shí)現(xiàn)顏色過渡的動(dòng)效了。這里我們用了一個(gè) Slider 組件，當(dāng)滑動(dòng)到不同的位置時(shí)，更改其中的紅色成分，就可以通過滑動(dòng)滑塊的位置進(jìn)行調(diào)節(jié)顏色濾鏡了，小姐姐的照片也能有不同的風(fēng)格了。完整代碼如下：

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)造方法、實(shí)現(xiàn)機(jī)制和應(yīng)用，同時(shí)使用 ColorFiltered 組件實(shí)現(xiàn)了顏色濾鏡效果。TweenAnimationBuilder還可以實(shí)現(xiàn)一些有趣的動(dòng)畫，比如下面這個(gè)來回移動(dòng)的球。