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

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

Answer 2

尝试一下

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

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

2 个答案: