Flare Flutter动画

Question

使用Flare Flutter（来自2dimensions.com）创建的动画无法在同一Flare Actor的不同动画之间切换。如果第一个是黑色版本，则不会显示白色版本。如果是白色版本，则显示黑色。

我不确定我做错了什么还是错误。它可以在颜色之间切换，而不能在动画之间切换。

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

const List<String> animations = ['White', 'Black'];
const List<Color> colors = [Colors.blue, Colors.black];

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Animation Tester',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Animation Tester'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;
  void switchAnimation() {
    setState(() {
      index = index < (animations.length - 1) ? index + 1 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    print(index);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: ListView(
        children: <Widget>[
          GestureDetector(
              onTap: switchAnimation,
              child: Icon(
                Icons.add,
                size: 100.0,
              )),
          Container(
              width: 200.0,
              height: 200.0,
              child: FlareActor(
                'assets/color_wheel_loading.flr',
                color: colors[index],
              )),
          Container(
              width: 200.0,
              height: 200.0,
              child: FlareActor(
                'assets/color_wheel_loading.flr',
                animation: animations[index],
              )),
          Center(child: Text('$index'))
        ],
      )),
    );
  }
}

Answer 1

我已经用我自己的文件测试了您的代码，效果很好。可能是您的动画名称不正确，您可以检查吗。

或者您可以使用以下代码测试文件“ https://www.2dimensions.com/a/whitewolfnegizzz/files/flare/pj”。

导入'package：flutter / material.dart';     导入'package：flare_flutter / flare_actor.dart';

const List<String> animations = ['Build and Fade Out', 'Build'];
const List<Color> colors = [Colors.blue, Colors.black];

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Animation Tester',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Animation Tester'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;
  void switchAnimation() {
    setState(() {
      index = index < (animations.length - 1) ? index + 1 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    print(index);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: ListView(
            children: <Widget>[
              GestureDetector(
                  onTap: switchAnimation,
                  child: Icon(
                    Icons.add,
                    size: 100.0,
                  )),
              Container(
                  width: 200.0,
                  height: 200.0,
                  child: FlareActor(
                    'assets/color_wheel_loading.flr',
                    color: colors[index],
                  )),
              Container(
                  width: 200.0,
                  height: 200.0,
                  child: FlareActor(
                    'assets/Pj.flr',
                    animation: animations[index],
                  )),
              Center(child: Text('$index'))
            ],
          )),
    );
  }
}

Answer 2

根据我的观察，Flare动画名称区分大小写。如果flare项目中的动画名称为小写，则flare actor的animation属性也应为小写。

Answer 3

1. 在资产中添加flr。
2. 在Pubsepec.yaml文件中初始化它
3. 然后在pubsepec.yaml文件中添加耀斑动画的依赖性

在此之后，

只需在您的主文件中使用此代码

Container(
          height: MediaQuery.of(context).size.height *0.8,
          child: FlareActor(
            'assets/oncemore.flr',
            animation: 'Celebrate Duplicate',    // Check this, when you are downloading flr file from Flare 2D dimension website
            fit: BoxFit.contain,
          ),
        ),

此后，您的Flare动画将完美运行。