flutter - 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'))
        ],
      )),
    );
  }
}

标签： flutter

Answer 1

我已经用我自己的文件测试了你的代码，它运行良好。可能是您的动画名称不对，您可以检查一下。

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

导入“包：颤振/material.dart”；导入“包：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'))
            ],
          )),
    );
  }
}