我希望每当我点击按钮时我的小部件就会以动画方式移动到屏幕的随机部分

Question

基本上我有一个小部件和一个浮动操作按钮，我想让该小部件在按下按钮时移动，我设法将其传送到随机位置，但我希望它具有动画效果。

我希望我的小部件在按下按钮时能够从当前位置移动到新位置。

randomNumber() 函数也是一个在最小值和最大值之间选择随机数的函数。 随机数（最小值，最大值）；

class _homePageState extends State<homePage> with SingleTickerProviderStateMixin{

  late final AnimationController _animationController = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  )..forward();


  @override
  void initState() {

    super.initState();
  }

  double beginX = randomNumber(-1, 1);
  double beginY = randomNumber(-1, 1);

  double endX = randomNumber(-1, 1);
  double endY = randomNumber(-1, 1);

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

  @override
  Widget build(BuildContext context) {

    late final Animation<Offset> _animation = Tween<Offset>(
      begin: Offset(beginX, beginY),
      end: Offset(endX, endY),
    ).animate(_animationController);

    return Scaffold(
      body: Center(
          child: SlideTransition(
            child: Container(
                height: 100,
                width: 100,
                color: Colors.red,
            ),
            position: _animation,
          )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {

            beginX = endX; // here i wanted the widget's old end position to become it's new begin position
            beginY = endY;

            endX = randomNumber(-1, 1);
            endY = randomNumber(-1, 1);

            _animationController..forward();

          });
        },
      ),
    );
  }
}

Answer 1

您可以设置自己的动画并以这种方式执行此操作，但是仅使用 aStack和 an会更简单AnimatedPositioned，然后您只需更新一些随机位置值并重建小部件即可。

文档包含所有信息