Animation not changing when no keyframes

[sergiandreplace]

Hi

I have a Flare file with two animations: idle and moving. Idle is just a static figure, with no movement.

If in Flutter I change the animation assigned to the actor from moving to idle, nothing happens and it still shows the moving one.

The only way I've found of fixing this was adding "fake" keyframes to the idle animation.

Is this the expected behaviour?

The sample code (dirty one, I was playing around 😄)

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  static const double STEP = 300;
  static const String ANIMATION_IDLE = "Idle";
  static const String ANIMATION_MOVING = "MovingRight";

  AnimationController _controller;
  double _currentSize = 100;
  String _animation = ANIMATION_IDLE;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    _controller.addListener(() {
      setState(() {
        if (_controller.status == AnimationStatus.completed) {
          _animation = ANIMATION_IDLE;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(),
          Container(
            margin: EdgeInsets.only(bottom: 130),
            height: 150,
            width: _currentSize + (_controller.value ?? 0) * STEP,
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
            ),
          ),
          Positioned(
            left: -130,
            child: Container(
              width: 160,
              height: 240,
              margin: EdgeInsets.only(
                  bottom: 240,
                  left: _currentSize + (_controller.value ?? 0) * STEP),
              child: FlareActor(
                "assets/golf.flr",
                animation: _animation,
              ),
            ),
          ),
          Row(
            children: <Widget>[
              RaisedButton(
                child: Text("Move!"),
                onPressed: () {
                  _controller.forward(from: 0);
                  _animation = ANIMATION_MOVING;
                },
              ),
              RaisedButton(
                child: Text("Reset!"),
                onPressed: () {
                  setState(() {
                    _controller.reset();
                  });
                },
              ),
            ],
          ),
        ],
        alignment: AlignmentDirectional.bottomStart,
      ),
    );
  }
}

[luigi-rosso]

Hi @sergiandreplace! Could you share the link to your Flare file?

I think this might be a case of poor documentation on our side. When Flare (in the editor) swaps from one animation to another, it resets all your properties for every object back to their setup state. At runtime (in Flutter) this does not happen as we allow blending animations on top of each other, so the results from one animation will persist unless they are overwritten by another. That means that if you plan to switch between animations, and you expect certain properties to return to their setup value, you'll need to manually key them in your second animation.

This will be clearer when we add support for a state machine that'll let you switch animations directly in Flare so you can preview the fully blended animations and all their various transitions before exporting to Flutter.

[luigi-rosso]

In this case, I suspect you want to key the properties you move in MovingRight in your Idle animation at their setup state. You can do this by adding one keyframe at the start of Idle for each property you change in MovingRight.

In the future we could also explore adding an option to the widget (and the FlareControls controller) to automatically reset the state for you.

[sergiandreplace]

Makes complete sense, that also explains my question on how to "morph" from one animation to another (if I understood correctly, it's just magic 😆 ).

[sergiandreplace]

Here the file: https://www.2dimensions.com/a/sergiandreplace/files/flare/golf-hole/preview

But already added keys to the idle animation (making a quick and dirty flag-wave animation)

[luigi-rosso]

Regarding the morphing, yes, Flare handles that for you! By default the FlareWidget will mix the incoming animation for 0.1 seconds on top of the previous animation (the previous animation will keep playing too so the mix/morph happens as both animations are changing, which works very well for very dynamic animations when transitioning from say a run to a walk cycle). Furthermore, it works with as many animations mixed on top of each other as you want!

[sergiandreplace]

Great! Nice work guys!