1、自定义显示动画，实现淡入淡出

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{late AnimationController _controller;@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this,duration: const Duration(milliseconds: 500));}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Column(children: [Container(child: AnimatedBuilder(animation: _controller,builder: (context,child){return Opacity(// Tween定义显示范围0.5-1.0之前，animate(_controller).value 会在0- 1之间自动切换opacity: Tween(begin: 0.5,end: 1.0).animate(_controller).value,child: Container(width: 200,height: 200,color: Colors.red,),);},),),ElevatedButton(onPressed: (){_controller.forward();}, child: const Text('显示')),ElevatedButton(onPressed: (){_controller.reverse();}, child: const Text('隐藏')),],),);}
}

2、自定义显示动画，实现位移

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{late AnimationController _controller;@overridevoid initState() {super.initState();_controller = AnimationController(vsync: this,duration: const Duration(milliseconds: 500));}@overrideWidget build(BuildContext context) {// 可以通过追加chain定义动画曲线Animation x =Tween(begin: -100.0,end: 100.0).chain(CurveTween(curve: Curves.bounceInOut)).animate(_controller);return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Column(children: [AnimatedBuilder(animation: _controller,builder: (context,value){return Container(width: 100,height: 100,color: Colors.red,// Tween(-100 到100 之间)进行动画// animate(_controller).value 从0到1 之间过度transform: Matrix4.translationValues(x.value, 0.0, 0.0),);}),ElevatedButton(onPressed: (){_controller.forward();}, child: const Text('移动')),ElevatedButton(onPressed: (){_controller.reverse();}, child: const Text('还原')),],),);}
}