我希望我的小部件在我点击按钮时动画移动到屏幕的随机部分答案

【问题标题】：I want my widget to animate moving to a random part of the screen whenever i tap on a button我希望我的小部件在我点击按钮时动画移动到屏幕的随机部分
【发布时间】：2021-10-19 09:58:33
【问题描述】：

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

我希望我的小部件在按下按钮时以动画方式从他的当前位置移动到新位置。

randomNumber() 函数也是一个在最小值和最大值之间选择随机数的函数。 randomNumber(min,max);

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

          });
        },
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart animation flutter-animation

【解决方案1】：

您可以设置自己的动画并这样做，但是使用Stack 和AnimatedPositioned 会简单得多，然后您只需要更新一些随机位置值并重建小部件。

docs 拥有所有信息

【讨论】：