我想知道是否有可能在屏幕上添加淡入淡出的模糊效果。你有什么想法吗?我目前正在使用BackDropFilter来模糊我的屏幕,但是它在出现时不会淡入淡出。
BackDropFilter
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
xkrw2x1b2#
我发现我可以用一个叫AnimatedOpacity的小部件来制作backDropFiter的动画,你可以把它当作AnimatedContainer来使用!好好享受
AnimatedOpacity
backDropFiter
AnimatedContainer
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'), ), ) ], ), ); } }
3条答案
按热度按时间7kqas0il1#
你可以为模糊的sigma值设置动画,
https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html
xkrw2x1b2#
我发现我可以用一个叫
AnimatedOpacity
的小部件来制作backDropFiter
的动画,你可以把它当作AnimatedContainer
来使用!好好享受
z4iuyo4d3#
答案与@Damon的答案几乎相同,但包括工作示例