颤动：如何在转换过程中触发窗口小部件动画？

Question

您是否知道在转换到新屏幕之前我们如何为小部件设置动画？我的意思是：

1. 用户点击FAB，打开一个新屏幕
2. 在用户单击之后，FAB动画缩小，直到不可见（就像本机开发中的隐藏功能一样）
3. 当FAB不可见时，将触发新的屏幕转换

使用一个活动/多个片段在本机开发中实现这一点相对容易，但是我无法找到一种方法来实现这一点：/

Answer 1

您需要使用AnimationController并为您的FAB配置它并附加AnimationStatusListener。按下FAB后，您将启动动画，并在动画完成后在状态监听器中导航到下一页。

在这里，我为您编写了一个代码：

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: FabApp(),
      ),
    );

class FabApp extends StatefulWidget {
  _FabAppState createState() => _FabAppState();
}

class _FabAppState extends State<FabApp> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    controller.addListener(() {
      setState(() {});
    });
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Navigator.of(context).push(
          MaterialPageRoute<void>(builder: (BuildContext context) {
            return Scaffold(
              body: Text("Hi"),
            );
          }),
        );
      }
    });
    animation = Tween<double>(begin: 1, end: 0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Transform.scale(
        scale: animation.value,
        child: FloatingActionButton(onPressed: () {
          controller.forward();
        }),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}