如何使用 Flutter 创建以下过渡效果？

Question

我想使用 Flutter 创建在 iOS 版本的 Tinder 上使用的相同过渡效果，当您按下“登录”按钮时。

我使用英雄动画失败了，因为“登录”按钮消失了，并且在我的 gif 示例中没有转换。

谁能引导我找到正确的小部件，或者给我看一个例子。我对颤动动画还是个新手，我完全迷路了。

Answer 1

您可以像这样创建动画小部件：

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

  const ShowUp({Key key, this.delay, @required this.child}) : super(key: key);
  @override
  _ShowUpState createState() => _ShowUpState();
}

class _ShowUpState extends State<ShowUp> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation<Offset> _animationOffset;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    final curve =
        CurvedAnimation(parent: _animationController, curve: Curves.decelerate);
    _animationOffset =
        Tween<Offset>(begin: const Offset(0.0, 0.35), end: Offset.zero)
            .animate(curve);

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

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

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

通过使用 FadeTransition 和 SlideTransition，以及 CurvedAnimation 我想这就是你要找的，然后你这样称呼它：

ShowUp(
  delay: 300,
  child: FlatButton(
    color: Colors.blue,
    child: Text("Create Account"),
    onPressed: () {},
  ),
),

最后你使用 bool 变量来判断用户是否按下登录按钮，如果他们按下它你调用 setState 然后用 showUp 动画改变所有按钮。是不是很混乱？我做了完整的例子 here 以便更好地理解。

如何使用 Flutter 创建以下过渡效果？

How can I create the following transition effect using Flutter?

dart

flutter

flutter-animation