Flutter：如何在触发转换之前为小部件设置动画？

Question

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

用户点击 FAB，这会打开一个新屏幕
用户点击后，FAB 立即动画缩小直到不可见（就像原生开发中的隐藏功能一样）
当 FAB 不可见时，触发新的屏幕转换

在原生开发中使用一个 activity/multiple 片段实现这一点相对容易，但我找不到在 flutter 中实现这一点的方法：/

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();
  }
}

Flutter：如何在触发转换之前为小部件设置动画？

Flutter: How to animate a widget before transition is triggered?

animation

android

transition

flutter