Flutter-Hero Animation完成后启动Widget Animation

时间:2018-12-28 15:29:02

标签: flutter flutter-animation

假设我有两个页面,第1页和第2页包含一个英雄。在Page2中,我想在Hero动画完成后开始Widget动画。

是否可以通过Callback在第2页中获得有关Hero动画状态的通知?

到目前为止,我发现的唯一解决方法是向Widget动画添加延迟,以避免它在Hero动画完成之前开始:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Container(
        child: Hero(
          tag: "hero-tag",
          child: IconButton(
              icon: Icon(Icons.person),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (BuildContext context) => Page2(),
                    ));
              }),
        ),
      );
}

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation _fabAnimation;

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

    _controller = AnimationController(
        duration: const Duration(milliseconds: 400), vsync: this);

    _fabAnimation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(
      CurvedAnimation(
        parent: _controller,

        // delay to wait for hero animation to end
        curve: Interval(
          0.300,
          1.000,
          curve: Curves.ease,
        ),
      ),
    );

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Hero(
            tag: "hero-tag",
            child: Icon(Icons.person),
          ),
          ScaleTransition(
            scale: _fabAnimation,
            child: FloatingActionButton(
              child: Icon(
                Icons.camera_alt,
              ),
              onPressed: () {},
            ),
          ),
        ],
      ),
    );
  }
}

0 个答案:

没有答案