在颤动中左右移动对象

Question

我想知道我将如何移动和对象，例如左右颤动的球。目前我正在关注动画控制器的文档。

这是我目前所拥有的：

class BouncingBallDemo extends StatefulWidget {
  _BouncingBallDemoState createState() => _BouncingBallDemoState();
}

class _BouncingBallDemoState extends State<BouncingBallDemo>
    with TickerProviderStateMixin {
  AnimationController controller;

  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
      lowerBound: 0,
      upperBound: 200,
    );

    controller.addListener(() {
      setState(() {});
    });

    controller.repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: controller.value),
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.green,
          ),
          width: 40.0,
          height: 40.0,
        ));
  }
}

@override
Widget build(BuildContext context) {
  return Container(
      child: Container(
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.green,
    ),
    width: 40.0,
    height: 40.0,
  ));
}

我假设您会将边距设置为向左或向右以便将其向右或向左移动，但似乎并非如此。

例如，我希望球这样做：

当它下降时，它会向左移动，然后它会返回。我知道controller.repeat(reverse:true) 让球朝相反的方向返回以产生弹跳动画。

图片可能令人困惑，但基本上我希望球先向下然后向左然后向右然后向上。有点喜欢它在特定的路径上。

Answer 1

观看有关 AnimatedPositioned 小部件的视频，该小部件可让您轻松移动容器等。 https://youtu.be/hC3s2YdtWt8