这篇文章主要介绍“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”文章能帮助大家解决问题。
AnimatedSwitcher
通过动效完成其子组件的切换,默认的效果是 FadeTransition
。当其子组件发生改变的时候,就会按设定的转变效果进行转换。AnimatedSwitcher
的构造方法如下:
const AnimatedSwitcher({
Key? key,
this.child,
required this.duration,
this.reverseDuration,
this.switchInCurve = Curves.linear,
this.switchOutCurve = Curves.linear,
this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
})
与之前其他的动画组件不同,AnimatedSwitcher
的参数除了 duration
之外,其他的有所不同,具体如下:
reverseDuration
:反向时长,也就是切换为旧组件的时长,不设置的话就和 duration
一致。
switchInCurve
:切入动画曲线,也就是新组件切换进入的曲线;
switchOutCurve
:切出动画曲线,也就是旧组件切换出去时的曲线;
transitionBuilder
:切换转变动画构建,是一个函数,定义如下,可以用这个方法来构建自己的切换动效。
typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);
layoutBuilder
:可以设置新组件在组件树中的布局,也是一个函数:
typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);
默认布局为 defaultLayoutBuilder
,也就是将当前组件放置在最顶层:
static Widget defaultLayoutBuilder(Widget? currentChild, List<Widget> previousChildren) {
return Stack(
children: <Widget>[
...previousChildren,
if (currentChild != null) currentChild,
],
alignment: Alignment.center,
);
}
关于AnimatedSwitcher
有一个地方需要特别注意,那就是如果切换的两个组件相同的话,AnimatedSwitcher
会以为组件没有改变,而不会进行动效切换。文档说明如下:
The child is considered to be "new" if it has a different type or [Key]
实际上是根据 Widget
的 canUpdate
判断的:
static int _debugConcreteSubtype(Widget widget) {
return widget is StatefulWidget ? 1 :
widget is StatelessWidget ? 2 :
0;
}
因此,如果两个组件类型相同,需要使用不同的 Key
来区分,通常是使用 ValueKey
。
下面我们来实现开篇的动效,这个使用的是 SizeTransition
尺寸变化转变动效完成两张图片的切换,这样会让组件的尺寸从小变到大,有一种掀开面纱的感觉。代码如下:
class AnimatedSwitcherDemo extends StatefulWidget {
AnimatedSwitcherDemo({Key? key}) : super(key: key);
@override
_AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState();
}
class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
Widget? _animatedWidget;
bool test = false;
@override
void initState() {
super.initState();
_animatedWidget = ClipOval(
child: Image.asset('images/beauty.jpeg'),
key: ValueKey(1),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedSwticher'),
brightness: Brightness.dark,
backgroundColor: Colors.black,
),
backgroundColor: Colors.black,
body: Center(
child: Container(
padding: EdgeInsets.all(10.0),
child: AnimatedSwitcher(
child: _animatedWidget,
duration: const Duration(milliseconds: 1000),
transitionBuilder: (child, animation) {
return SizeTransition(
sizeFactor: animation,
child: child,
);
},
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: () {
setState(() {
test = !test;
_animatedWidget = test
? ClipOval(
child: Image.asset('images/beauty2.jpeg'),
key: ValueKey(2),
)
: ClipOval(
child: Image.asset('images/beauty.jpeg'),
key: ValueKey(1),
);
});
},
),
);
}
}
关于“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。