从上一页重置动画

Question

我有页面过渡动画，其中所有元素向上移动（向上滑动）然后转到 SearchPage...

@override
  void initState() {

    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, -2.0))
        .animate(controller);

    offset2 = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, -1.0))
        .animate(controller);
  }

然后点击按钮我触发这个动画并移动到另一个页面：

Navigator.push( context, MaterialPageRoute(builder: (context) => SearchPage()),;

但是，我想在按下后退按钮时从第一页 (HomePage( )) 重置动画。

我怎样才能从 SearchPage 得到这个 controller 属性？可能我必须做 controller.reset() 还是有其他方法？

Answer 1

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offset;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, -10.0)).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page 1")),
      body: Center(
        child: SlideTransition(
          position: _offset,
          child: RaisedButton(
            onPressed: () async {
              await _controller.forward();
              Navigator.push(context, MaterialPageRoute(builder: (_) => Page2())).then(
                (_) => _controller.reverse(), // this is all you need, you can also use reset here
              );
            },
            child: Text("Navigate"),
          ),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(context) => Scaffold(appBar: AppBar(title: Text("Page 2")));
}

从上一页重置动画

Reset Animation from previous page

dart

flutter

flutter-animation