flutter - 如何在 Flutter 中制作 "show up"文字动画？

Question

我想实现 material.io 页面中显示的那种行为:

文本在第一次显示时进行了很好的过渡。

我如何在 Flutter 中做到这一点？

Answer 1

您可以像这样组合小部件:

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

class ShowUp extends StatefulWidget {
  final Widget child;
  final int delay;

  ShowUp({@required this.child, this.delay});

  @override
  _ShowUpState createState() => _ShowUpState();
}

class _ShowUpState extends State<ShowUp> with TickerProviderStateMixin {
  AnimationController _animController;
  Animation<Offset> _animOffset;

  @override
  void initState() {
    super.initState();

    _animController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    final curve =
        CurvedAnimation(curve: Curves.decelerate, parent: _animController);
    _animOffset =
        Tween<Offset>(begin: const Offset(0.0, 0.35), end: Offset.zero)
            .animate(curve);

    if (widget.delay == null) {
      _animController.forward();
    } else {
      Timer(Duration(milliseconds: widget.delay), () {
        _animController.forward();
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      child: SlideTransition(
        position: _animOffset,
        child: widget.child,
      ),
      opacity: _animController,
    );
  }
}

然后你可以像这样使用它:

int delayAmount = 500;
...........
...........
...........
Column(
        children: <Widget>[
            ShowUp(
              child: Text("The first texto to be shown"),
              delay: delayAmount,
            ),

            ShowUp(
              child: Text("The text below the first"),
              delay: delayAmount + 200,
            ),

            ShowUp(
              child: Column(
                children: <Widget>[
                  Text("Texts together 1"),
                  Text("Texts together 2"),
                  Text("Texts together 3"),
                ],
              ),
              delay: delayAmount + 400,
            ),
          ],
        ),

请注意，这个“ShowUp”小部件可以为任何东西制作动画，而不仅仅是文本。