如何在颤动中设置 Transform.translate() 动画的持续时间？答案

【问题标题】：How to set duration of Transform.translate() animation in flutter?如何在颤动中设置 Transform.translate() 动画的持续时间？
【发布时间】：2019-08-28 05:02:11
【问题描述】：

我目前正在尝试学习 Flutter，并尝试在 Flutter 中制作井字游戏。我想要我的游戏，当我点击一个瓷砖时，圆圈和十字架会从上面掉下来。我正在尝试使用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() 的持续时间。但是找不到任何方法。

【问题讨论】：

因为 Transform.translate 不提供任何动画 - 你需要 AnimatedAlign / AlignTransition / SlideTransition 或类似的小部件
你能告诉我如何实现它们以使动画按预期工作吗？
只需使用上述小部件包装您的小部件，并查看有关您正在使用的小部件的文档，这就是您应该学习的方式，如果您在任何时候遇到困难，请告诉我们或发布另一个题。祝你好运！
好的。我会尽力。谢谢

标签： android flutter dart flutter-layout flutter-animation

【解决方案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),
          );
        },
      ),
    );
  }
}

【讨论】：

【解决方案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();
    }

【讨论】：