在Flutter中给widget添加动画

在Android中，可以通过通过XML创建动画或在视图上调用View.animate()对视图进行动画处理。在flutter中，可以通过动画库给widget添加动画，将widget包装到Animation中。

与Android相似，在Flutter中，有一个AnimationController控制器和一个Interpolator， 它是Animation类的扩展，如CurvedAnimation。将控制器和动画传递到AnimationWidget中，并告诉控制器启动动画。
如一个FadeTransition，当按下时会淡入一个logo:

class _MyHomeAppSate extends State<StatefulWidget> with TickerProviderStateMixin{
  AnimationController controller;
  CurvedAnimation curve;
  @override
  void initState() { super.initState(); controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
  } @override
  Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text("Hello"), ), body: Center(child: Container(child: FadeTransition(opacity: curve,child: FlutterLogo(size: 100.0,),),),), floatingActionButton: new FloatingActionButton( tooltip: 'Fade', child: new Icon(Icons.brush), onPressed: (){ controller.forward(); }, ), ), );
  }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
 

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/108166027