来自 Flutter 资产的动画

Question

我目前正在开发一个应用程序，该应用程序类似于具有现代风格的老式 Tamagotchi。现在我准备了一些代码并且不需要任何角色动画但现在我被卡住了。我想制作一个带有标题的脚手架，下面有一排按钮，但仍然在屏幕顶部，第二组在底部，并在这两者之间创建某种交互性，角色由资产制成，一些动画和触摸反应.要清楚 - 像这样：

class _AnimationState extends State<Animation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        "some title here"
      ),
      body:
        Column(
          children: [
             Row(here some buttons)
             Column(with animation, height as was left on screen)
             Row(another line of buttons)
          ],
        ),
    );
  }
}

我在考虑 Flame 引擎，甚至找到了教程，但是当我尝试实现它时我收到异常

The method '_mulFromInteger' was called on null. Receiver: null Tried calling: _mulFromInteger(0)

这是我编写的教程： https://medium.com/flutter-community/sprite-sheet-animations-in-flutter-1b693630bfb3

我尝试实现的代码：

Center(
  child:
    Flame.util.animationAsWidget(Position(70, 70),
    animation.Animation.sequenced('minotaur.png', 5, textureWidth: 50),
   ),
),

另一个想法是使用 Sprite Widget，但我在以前的项目中从未使用过任何动画，也没有在 Flutter、C# 或我在大学时使用过的任何语言中使用过。

如果有任何关于如何处理资产动画的建议、教程或示例，我将不胜感激。

Answer 1

那个教程很老了，从那以后Flame的世界发生了很多事情。

我猜您使用的是 1.0.0-rc9 版的 Flame？

像这样的东西应该适用于那个版本：

final animationData = SpriteAnimationData.sequenced(
  amount: 5, stepTime: 1.0, textureSize: Vector2.all(50)); 
final spriteAnimation = await SpriteAnimation.load(
  'minotaur.png' animationData);

...

Center(
  child: SpriteAnimationWidget(
    animation: spriteAnimation,
    playing: true,
    anchor: Anchor.center,
  ),
)

可以找到它的示例 here。还有一些简短的文档 here.

来自 Flutter 资产的动画

Animation from assets in Flutter

animation

flutter

flame