有没有办法修改 Flare 中的初始动画状态？

Question

我创建了一个 Flare 动画，它只是 Flutter 应用程序中的一个 subscribe/unsubscribe 按钮。

按下按钮时动画运行，一切正常，例如，如果用户已订阅，则按钮在用户按下后显示为 'subscribed'。但是，如果用户已经订阅并且 returns 到相关屏幕，则该按钮不处于订阅状态。它保持原来的'subscribe'状态

我正在使用我的 Flare 文件中的单个画板。它有两个动画，订阅和取消订阅，它们听起来像。单击按钮时动画会正确播放，但重新加载屏幕时不会保留状态。例如，如果我已经订阅，然后离开应用程序并返回，我会看到 'subscribe' 按钮，即使我已经这样做了。

我不确定我是否需要为此设置 2 个单独的画板，或者是否有更好的方法？

class SubUnsubButton extends StatefulWidget {
  final Fight fight;
  const SubUnsubButton({
    Key key,
    @required this.fight,
  }) : super(key: key);

  @override
  _SubUnsubButtonState createState() => _SubUnsubButtonState();
}

class _SubUnsubButtonState extends State<SubUnsubButton>
    with TickerProviderStateMixin {
  FlareControls flareController = FlareControls();
  String animation;

  @override
  initState() {
    super.initState();
    widget.fight.userIsSubscribed ? animation = 'Sub' : animation = 'Unsub';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 50,
            child: FlatButton(
              child: FlareActor(
                "assets/animations/FightBell.flr",
                artboard: "SubUnsub",
                controller: flareController,
                fit: BoxFit.contain,
                animation: animation,
                sizeFromArtboard: true,
              ),
              onPressed: () {
                // If not subsribed
                FirebaseUser user = Provider.of<FirebaseUser>(context);
                if (!widget.fight.userIsSubscribed) {
                    animation = 'Sub';
                } else {
                    animation = 'Unsub';

                }
              },
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

您不需要第二个画板。解决此问题的最简单方法是添加 initState 方法并根据 onPressed 回调中的相同逻辑设置动画值。请注意，在 onPressed 中对动画值的更改实际上应该在 setState 调用中完成，以确保在动画值更改时更新小部件。

一种通常更简洁的方法是使用像 isSubscribed 这样的布尔值，而不是将 isSubscribed 逻辑封装到另一个 (Fight) 对象中。这将允许 flutter 小部件系统在 isSubscribed 更改时自动调用您的状态 class 上的 didUpdateWidget。然后您可以通过调用 setState 并更改动画值来响应该更改。您可能会传入一些其他回调，以便在调用 onPressed 时调用，以便使用此 SubUnsubButton 的小部件可以更改 isSubscribed 值。

您可能根本不需要有状态的小部件，看看 checkbox example in the Flare-Flutter repository. It displays a list of checkboxes with randomly chosen values at boot for whether they are checked or not. The SmileySwitch checkbox class is implemented as a stateless widget while the implementing Settings class 只是遍历值，为每个值创建一个 SmileySwitch，然后通过以下方式响应 onToggle 回调根据需要更改值。这应该与您正在尝试做的非常相似。

Answer 2

正如 Luigi 在他的链接示例中所展示的那样，只需 snapToEnd 耀斑演员属性即可解决该问题。首次将动画渲染到正确状态时将其设置为 true。然后当您获得应该导致动画运行.

的用户输入时，将其切换为 false

class SubUnsubButton extends StatefulWidget {
  final Fight fight;
  const SubUnsubButton({
    Key key,
    @required this.fight,
  }) : super(key: key);

  @override
  _SubUnsubButtonState createState() => _SubUnsubButtonState();
}

class _SubUnsubButtonState extends State<SubUnsubButton>
    with TickerProviderStateMixin {
  FlareControls flareController = FlareControls();
  String animation;
  bool _snapToEnd

  @override
  initState() {
    super.initState();
    _snapToEnd = true
    widget.fight.userIsSubscribed ? animation = 'Sub' : animation = 'Unsub';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 50,
            child: FlatButton(
              child: FlareActor(
                "assets/animations/FightBell.flr",
                artboard: "SubUnsub",
                controller: flareController,
                fit: BoxFit.contain,
                animation: animation,
                sizeFromArtboard: true,
              ),
              onPressed: () {
                // If not subsribed
                FirebaseUser user = Provider.of<FirebaseUser>(context);
                if (!widget.fight.userIsSubscribed) {
                    setState(() {
                      _snapToEnd = false;
                      animation = 'Sub';
                    });
                } else {
                    setState(() {
                      _snapToEnd = false;
                      animation = 'Unsub';
                    })

                }
              },
            ),
          ),
        ],
      ),
    );
  }
}

有没有办法修改 Flare 中的初始动画状态？

Is there a way to modify the initial animation state in Flare?

animation

flutter

flare