实现 Flutter 显式动画以在整个容器中移动小部件的最佳方法是什么?

时间:2021-03-09 00:13:48

标签: flutter dart flutter-animation

以下动画将产生 x/y 坐标,我可以将其插入到您在图片中看到的橙色容器上 Stack 中的表情符号中。

然而,它只会从左上角到右下角成一条直线。

我希望能够在橙色背景图像中到处移动 Lottie 图像小部件,而不是反向移动,而是继续随机移动。我也想不时调整速度和大小和旋转。

在我的搜索中,我没有找到可以在 Flutter 库中执行此操作的隐式动画小部件。仍在寻找中,但希望有 Flutter 动画专家可以为我指明正确的方向。

enter image description here

_repeatingAnimationLong = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    )..repeat(reverse: true);

_xAnimation = Tween<double>(
  begin: 0,
  end: _corralWidth,
).animate(_repeatingAnimationLong)
  ..addListener(() {
    setState(() {});
  })
  ..addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      // do something
    } else if (status == AnimationStatus.dismissed) {
      // do something
    }
  });

_yAnimation = Tween<double>(
  begin: 0,
  end: _corralHeight,
).animate(_repeatingAnimationLong)
  ..addListener(() {
    setState(() {});
  })
  ..addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      // do something
    } else if (status == AnimationStatus.dismissed) {
      // do something
    }
  });

....some code

Stack

...some code

Positioned(
  top: _yAnimation?.value ?? randomStartingY,
  left: _xAnimation?.value ?? randomStartingX,
  child: Lottie.asset(
    'covers/pleading.json',
    width: 41,
    height: 44,
  ),
),

0 个答案:

没有答案