Flutter 中的资产动画答案

【问题标题】：Animation from assets in FlutterFlutter 中的资产动画
【发布时间】：2021-04-21 15:38:06
【问题描述】：

我目前正在开发一款类似于带有现代曲折的老式 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)
          ],
        ),
    );
  }
}

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

在 null 上调用了方法“_mulFromInteger”。接收方：空调用：_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# 或我大学时使用的任何语言中使用过任何动画。

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

【问题讨论】：

您是否已将 minotaur.png 添加到 pubspec.yaml 中的资产路径中？
是的，我可以在 Image(AssetImage('assets/images/minotaur.png') 中看到它，但它只是不想与完整路径或文件名合作

标签： flutter animation flame

【解决方案1】：

那个教程很老了，从那时起在火焰世界发生了很多事情。

我猜你使用的是 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。

【讨论】：