flutter 抖动动画BackDropFilter

pokxtpni  于 2023-02-25  发布在  Flutter
关注(0)|答案(3)|浏览(162)

我想知道是否有可能在屏幕上添加淡入淡出的模糊效果。你有什么想法吗?我目前正在使用BackDropFilter来模糊我的屏幕,但是它在出现时不会淡入淡出。

7kqas0il

7kqas0il1#

你可以为模糊的sigma值设置动画,

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0.0, end: 15.0),
  duration: const Duration(milliseconds: 500),
  builder: (_, value, child) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: value, sigmaY: value),
      child: child,
    );
  },
  child: DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.white.withOpacity(0.5),
  ),
),

https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html

xkrw2x1b

xkrw2x1b2#

我发现我可以用一个叫AnimatedOpacity的小部件来制作backDropFiter的动画,你可以把它当作AnimatedContainer来使用!
好好享受

z4iuyo4d

z4iuyo4d3#

答案与@Damon的答案几乎相同,但包括工作示例

class BackgroundBlurExample extends StatefulWidget {
  @override
  _BackgroundBlurExampleState createState() => _BackgroundBlurExampleState();
}

class _BackgroundBlurExampleState extends State<BackgroundBlurExample> {
  double _begin = 10.0;
  double _end = 0.0;

  void _animateBlur() {
    setState(() {
      _begin == 10.0 ? _begin = 0.0 : _begin = 10.0;
      _end == 0.0 ? _end = 10.0 : _end = 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: FlutterLogo(
              size: 100,
            ),
          ),
          
          // ... Things you want to blur above the IgnorePointer

          IgnorePointer( // This is in case you want to tap things under the BackdropFilter
            child: TweenAnimationBuilder<double>(
              tween: Tween<double>(begin: _begin, end: _end),
              duration: Duration(milliseconds: 500),
              curve: Curves.easeIn,
              builder: (_, value, __) {
                return BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: value,
                    sigmaY: value,
                  ),
                  child: Container(
                    width: double.maxFinite,
                    height: double.maxFinite,
                    color: Colors.transparent,
                  ),
                );
              },
            ),
          ),

          Align(
            alignment: Alignment.bottomCenter,
            child: ElevatedButton(
              onPressed: _animateBlur,
              child: Text('Animate'),
            ),
          )
        ],
      ),
    );
  }
}

相关问题