Как анимировать анимацию по кривой в Flutter

Question

Я хочу, чтобы пузырь плавно перемещался между краями экрана, отслеживая случайные кривые. Это код, который у меня есть

class BubbleAnimator extends StatefulWidget {
  const BubbleAnimator({Key key}) : super(key: key);

  @override
  _BubbleAnimatorState createState() => _BubbleAnimatorState();
}

class _BubbleAnimatorState extends State<BubbleAnimator> {
  double x;
  double y;

  @override
  void initState() {
    super.initState();

    x = math.Random().nextDouble()*2-1;
    y = math.Random().nextDouble()*2-1;
  }

  @override
  Widget build(BuildContext context) {
    return Bubble(
      x: x,
      y: y,
    );
  }
}

class Bubble extends StatelessWidget {
  final double x;
  final double y;

  const Bubble({Key key, this.x, this.y}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedAlign(
      duration: Duration(milliseconds: 300),
      alignment: Alignment(x, y),
      child: GestureDetector(
          onTap: () {
            print("tapped");
          },
          child: AnimatedContainer(
            duration: Duration(milliseconds: 300),
            decoration:
            BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
            height: 30,
            width: 30,
          )),
    );
  }
}

Как я могу заставить свой BubbleAnimator двигаться по кривой?

Например, пусть мой пузырь появляется в середине экрана. Затем пузырь перемещается к случайному краю экрана с помощью плавной кривой. Удар по краевому пузырьку затем изменяет его направление на другой край, отслеживая другую непредсказуемую кривую.

Answer 1

AnimatedAlign как и любой другой анимированный виджет (AnimatedContainer, и т. Д. c) должен находиться внутри StatefulWidget.

Ваши значения x и y не могут быть final, поскольку они должны измениться, чтобы оживить вашу Alignment.

Либо переместите вашу BubbleWidget логи c в вашу BubbleAnimator, либо переместите все в Bubble и конвертируйте ее в StatefulWidget.

Вам нужно будет вызывать setState каждый раз, когда вы меняете переменные x и y.