如何在Flutter中设置Transform.translate（）动画的持续时间？

Question

我目前正在尝试学习颤振，并尝试在颤振中制作井字游戏。 我希望自己的游戏能够在我点击图块时从上方掉下来。 我试图两次使用Transform.Translate()来实现这一点。 像这样

GridTile(
          child: Transform.translate(
            child: Transform.translate(
              child: Image.asset(
                MultiPlayerGameLogic().imageProvider(i),
                fit: BoxFit.scaleDown,
              ),
              offset: Offset(0, -1000),
            ),
            offset: Offset(0, 1000),
          ),
        )

但这是立即发生的，无法看到动画。 我想设置外部Transform.translate()的持续时间。 但是找不到任何办法。

Answer 1

尝试这个

AnimationController _controller;

@override
void initState() {
  super.initState();
  _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 1000));
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Title")),
    body: AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return GridTile(
          child: Transform.translate(
            child: Transform.translate(
              child: Image.asset(
                MultiPlayerGameLogic().imageProvider(i),
                fit: BoxFit.scaleDown,
              ),
              offset: Offset(0, -1000),
            ),
            offset: Offset(0, 1000),
          ),
        );
      },
    ),
  );
}

每当您要开始动画时，只需调用

_controller.forward();

Answer 2

我正在将Transform.translate()与Animation

    AnimationController controller;
    Animation<double> animation;

    @override
    void initState() {
       super.initState();
        controller = new AnimationController(
           duration: Duration(seconds: 3), vsync: this)..addListener(() => 
           setState(() {}));
        animation = Tween(begin: -500.0, end: 500.0).animate(controller);
        controller.forward();
     }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Transform.translate(
           child: Image.asset('image_path'),
           offset: Offset(animation.value, 0.0),
      ));
    }

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