如何在颤动中设置 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),
          ),
        )

但这会立即发生，并且看不到动画。我想设置 external 的持续时间Transform.translate()。但是找不到任何方法可以这样做。

Answer 1

截屏：

代码：

您需要将 Transform 小部件包装到另一个小部件中，例如AnimatedBuilder或AnimatedWidget。

例如：

class _MyPageState extends State<MyPage> with TickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    ); // <-- Set your duration here.
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(0, 100 * _controller.value),
            child: FlutterLogo(size: 100),
          );
        },
      ),
    );
  }
}

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();
    }