首页 > 解决方案 > flare_flutter 动画显示问题

问题描述

问题是无法显示动画,但只能显示图像。这里只有关于 BottomAnimeLoader 的部分代码。所以请帮我弄清楚为什么这里只有静态图像会发生什么。(使用flutter框架和dart语言)

动画是静态的

import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';

class BottomAnimeLoader extends StatefulWidget {
  @override
  _BottomAnimeLoaderState createState() => _BottomAnimeLoaderState();
}

class _BottomAnimeLoaderState extends State<BottomAnimeLoader> {
  String _animationName = "new";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
              child: FlareActor(
            "assets/flr/success.flr",
            fit: BoxFit.contain,
            alignment: Alignment.center,
            animation: _animationName,
          ))
        ],
      ),
    );
  }
}

标签: flutteranimationdartflare

解决方案


我用官方例子的flr文件来模拟这种情况,因为我没有你的flr文件
如果你的_animationName名字错误,那么它会变成静态图像
在官方例子中,_animationNameidle,如果我把它改成它new会变成静态图像
请更正您的_animationName,例如以下 https://rive.app/a/pollux/files/flare/success-check _animationNameUntitled

在此处输入图像描述

工作演示

在此处输入图像描述

完整的测试代码

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

class BottomAnimeLoader extends StatefulWidget {
  @override
  _BottomAnimeLoaderState createState() => _BottomAnimeLoaderState();
}

class _BottomAnimeLoaderState extends State<BottomAnimeLoader> {
  String _animationName = "success";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
              child: FlareActor(
            "assets/flr/success.flr",
            fit: BoxFit.contain,
            alignment: Alignment.center,
            animation: _animationName,
          ))
        ],
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BottomAnimeLoader(),
    );
  }
}

推荐阅读