顫動動畫

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'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您可以使用持續時間和曲線來獲得所需的結果。