Flutter 38: 圖解 Flutter 基本動畫 (二)

小菜前兩天學習瞭如下 Animation 的基本動畫，接下來小菜學習如下稍微進階版的 Animation 動畫。

複合動畫

      小菜前兩天學習的主要是基本的單一動畫，固然多個動畫效果集一身也是毫無問題的，小菜接下來嘗試一個圖片顯隱性和縮放同時循環使用的 Demo；

1. addStatusListener 用來監聽當前動畫狀態，即開始或結束；
2. addListener 用來堅挺動畫過程，可獲取實時 value 值；

AnimationController controller;
Animation<double> animation, sizeAnim; @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this); animation = Tween(begin: 0.0, end: 1.0).animate(controller); sizeAnim = Tween(begin: 0.0, end: 180.0).animate(controller); animation.addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } else if (status == AnimationStatus.dismissed) { controller.forward(); } }); sizeAnim.addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } else if (status == AnimationStatus.dismissed) { controller.forward(); } }); } Widget bodyWid() { return Center( child: Opacity( opacity: animation.value, child: FlutterLogo(size: sizeAnim.value))); }

時間段動畫

      既然能夠監聽動畫過程和動畫狀態，總體的動畫即可以靈活掌握；小菜接下來嘗試一下分時間段動畫，前 50% 顯隱性處理，後 50% 縮放處理；

AnimationController controller;
Animation<double> animation, sizeAnim; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); animation = Tween<double>( begin: 0.0, end: 1.0, ).animate(CurvedAnimation( parent: controller, curve: Interval(0.0, 0.5, curve: Curves.ease))); sizeAnim = Tween<double>( begin: 100.0, end: 180.0, ).animate(CurvedAnimation( parent: controller, curve: Interval(0.5, 1.0, curve: Curves.fastOutSlowIn))); } Widget bodyWid() { return Center( child: Opacity( opacity: animation.value, child: FlutterLogo(size: sizeAnim.value))); }

自定義動畫

      動畫是靈活的，咱們能夠根據本身的需求自定義動畫效果，小菜嘗試一個圓環繞一個圓轉圈；

AnimationController controller;
Animation<double> animation; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); animation = Tween(begin: -1.0, end: 1.0).animate(controller); } class AnimationCanvas extends CustomPainter { Animation<double> animation; AnimationCanvas(this.animation); Paint _paint = Paint() ..color = Colors.blue ..strokeWidth = 4.0 ..style = PaintingStyle.stroke; @override void paint(Canvas canvas, Size size) { canvas.save(); canvas.drawCircle(Offset(300, 300.0), 150.0, _paint); canvas.restore(); canvas.save(); canvas.translate(150 * sin(pi * animation.value), 150 * cos(pi * animation.value)); canvas.drawCircle(Offset(300, 300.0), 10.0, _paint..color = Colors.red); canvas.restore(); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }

Hero 動畫

      Hero 動畫是 Flutter 提供的飛入式動畫，主要用在頁面間切換時動畫，且返回時動畫按原路返回；使用時設置兩個頁面間 tag 一致便可，方便簡潔；

Widget bodyWid04() { return Container( child: Padding( padding: EdgeInsets.all(10.0), child: GestureDetector( child: Row(children: <Widget>[ Hero(tag: 'user_header', child: FlutterLogo(size: 50.0)), Padding( padding: EdgeInsets.only(left: 12.0), child: Text('Flutter Ptoto')) ]), onTap: () { Navigator.pushNamed(context, 'animateRoute01'); }))); }

---

      小菜學習了一下稍進階的動畫，若是有問題的煩請多多指導！