配置vsync,需要实现一下with SingleTickerProviderStateMixin
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// late延迟初始化 AnimationControllerlate AnimationController _controller;@overridevoid initState() {super.initState();// 初始化 AnimationController_controller = AnimationController(duration: const Duration(milliseconds: 500),vsync:this, // 让程序和手机的刷新频率统一);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Center(child: Column(children: [AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller,size: 40,color: Colors.red,),ElevatedButton(onPressed: (){_controller.forward();}, child: const Text('播放')),ElevatedButton(onPressed: (){_controller.reverse();}, child: const Text('返回')),],),),);}
}
AnimatedIcons参数选项包含:
add_event
arrow_menu
close_menu
ellipsis_search
event_add
home_menu
list_view
menu_arrow
menu_close
menu_home
pause_play
play_pause
search_ellipsis
view_list
上边没有想要的图标,那么就需要自己实现2个图标间的交错式动画
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationControllerlate AnimationController _controller;@overridevoid initState() {super.initState();// 初始化 AnimationController_controller = AnimationController(duration: const Duration(milliseconds: 1000),vsync:this, // 让程序和手机的刷新频率统一);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Column(children: [// 定义Stack,使2个图标重叠摆放Stack(children: [// 默认显示搜索图标,// Tween(开始1,结束0)// Interval时间为0-0.5之间//// 搜索图标开始为1.0显示,结束时0.0隐藏,时间从0.0开始,到0.5结束// 关闭图标开始为0.0隐藏,结束时1.0显示,时间从0.5开始,到1.0结束ScaleTransition(scale: _controller.drive(Tween(begin: 1.0,end: 0.0).chain(CurveTween(curve: const Interval(0.0, 0.5)))),child: Icon(Icons.search,size: 40,),),ScaleTransition(scale: _controller.drive(Tween(begin: 0.0,end: 1.0).chain(CurveTween(curve: Interval(0.5, 1)))),child: const Icon(Icons.close,size: 40,),),],),ElevatedButton(onPressed: (){_controller.forward();}, child: const Text('播放')),ElevatedButton(onPressed: (){_controller.reverse();}, child: const Text('返回')),],),);}
}