欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年12月09日 09:14:12   作者:島上碼農(nóng)  
這篇文章我們將利用TweenAnimationBuilder來實現(xiàn)一個圖片調(diào)色的過渡動畫,從而實現(xià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,
}) 

其中 durationcurveonEnd 我們在之前的動畫組件介紹過了,這里不再贅述。其他2個參數(shù)說明如下:

  • tweenTwee<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)文章

最新評論