如何在 Flutter 中通過曲線為 AnimatedAlign 設置動畫

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像任何其他 Animated Widget（ AnimatedContainer等）一樣需要在StatefulWidget 。

您的x和y值不能是final值，因為它們需要更改才能為您的Alignment設置動畫。

要么將BubbleWidget邏輯移動到BubbleAnimator要么將所有內容移動到Bubble並將其轉換為StatefulWidget 。

每次更改x和y變量時都需要調用setState 。