animation - flutter 动画

Question

如何在用户单击按钮后淡出第一个小部件，并使第二个小部件从底部开始动画，并替换第一个小部件？

然后单击第二个按钮，使第二个小部件下降并使第一个小部件淡入？

Answer 1

您可以为第一个小部件使用 AnimatedOpacity，为第二个小部件使用 AnimatedPositioned。这里有一个例子:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _firstWidgetOpacity = 1.0;
  double _secondWidgetBottomPosition = -200.0;

  animate() {
    setState(() {
      if (_firstWidgetOpacity == 1.0) {
        _firstWidgetOpacity = 0.0;
        _secondWidgetBottomPosition = MediaQuery.of(context).size.height / 2 - 140.0;
      } else {
        _firstWidgetOpacity = 1.0;
        _secondWidgetBottomPosition = -200.0;
      }
    });
  }

  @override
  void initState() {
    super.initState();
    print((560 / 60).floor());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: animate,
        label: Text('Animate'),
      ),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: AnimatedOpacity(
              duration: Duration(milliseconds: 350),
              opacity: _firstWidgetOpacity,
              curve: Curves.easeIn,
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
                child: Center(
                  child: Text('First widget'),
                ),
              ),
            ),
          ),
          AnimatedPositioned(
            duration: Duration(milliseconds: 350),
            curve: Curves.elasticIn,
            bottom: _secondWidgetBottomPosition,
            left: 0.0,
            right: 0.0,
            child: Center(
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Colors.orange,
                child: Center(
                  child: Text('Second widget'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您可以使用持续时间和曲线来获得您需要的结果。