Changing current playing animation more than once stops all playback

[teesloane]

Hi there!

I'm playing around with your lib — it's very cool. Right now I'm trying to enable swapping between different animations based on a slider — it works for the initial two animations but beyond that I seem to be running into trouble.

Here's a bit of code and a screen grab:

// The animation flare controller:
import 'package:flare_dart/math/mat2d.dart';
import 'package:flare_flutter/flare.dart';
import 'package:flare_flutter/flare_controls.dart';
// import 'package:metronome/flare_controls_patch.dart';

class MetroSimple extends FlareControls {
  FlutterActorArtboard _artboard;
  double _elapsedTime = 0.0;
  double _speed = 1.0;
  String currentAni = "Idle";
  Map animations = {};

  // @override
  advance(FlutterActorArtboard artboard, double elapsed) {
    super.advance(artboard, elapsed);
    _artboard = artboard;
    _elapsedTime += elapsed * _speed;
    var ani = animations[currentAni];
    ani.apply( _elapsedTime % ani.duration, artboard, 1.0);
    return true;
  }

  @override
  void initialize(FlutterActorArtboard artboard) {
    super.initialize(artboard);
    animations["Square"] = artboard.getAnimation("Square");
    animations["Triangle"] = artboard.getAnimation("Triangle");
    animations["Idle"] = artboard.getAnimation("Idle");
  }

  @override
  void setViewTransform(Mat2D viewTransform) {}

  
  updateChosenAnimation(val) {
    _elapsedTime = 0;
    currentAni = val;
  }
}

Is there something special I should be doing with the mix parameter? Thanks for any input!

[umberto-sonnino]

Could you provide your Flare file? We'll try to reproduce the issue

[luigi-rosso]

Thanks for using Flare!

Regarding mixing: If you want to smoothly transition between multiple animations, you should ramp up the mix value over time (from 0 to 1) for however long you want the transition to last. This basically interpolates the animation on top of the currently applied values. You can take a look at how FlareControls does this by maintaining a list of active animations and ramping them up when they are first added, and then removing them as they complete. This means that certain frames will have multiple animations applied with differing mix values. Think of it like an audio mixer with multiple channels (if that concept is familiar).

Regarding multiple animations/unexpected results: Usually, when swapping animations at runtime, the most common pitfall is that artists forget to re-key values that previous animations have changed. I’d check that first! For example, if one animation changes the rotation of some object to 45 degrees. That change will perpetuate until some other animation changes it. If that’s not expected, your incoming animation should key that rotation to an expected value. This is usually deceiving because Flare resets keys for you in the editor. But at runtime this doesn’t happen in order to allow for animation mixing. We have plans for how to improve this!

Like @umberto-sonnino said, send us the file and we can help you track down if it’s the key framing that’s causing the issue.

[teesloane]

Hi folks @luigi-rosso / @umberto-sonnino ; thanks for looking into this. Here is my original file

I ended up using separate files for each animation and then swapping them at runtime:

   Container(
                      height: 128,
                      child: FlareActor('assets/$_currentAnimation.flr', // <<<<<<<
                          alignment: Alignment.center,
                          fit: BoxFit.contain,
                          controller: _metroVisualizationCtlr),
                    )

Which gives me the desired results:

I would still prefer to use a single file with multiple animations; it's both easier to design and less to manage (also, there is a slight lag when hot-swapping the .flr files).

I think I understand what you mean with the mix factor, but it's a bit confusing (still a little new to flutter). I'll be refactoring the app soon and taking a crack at fixing the animations as part of it. I think I'm a bit confused because I see the animations in the bottom left pane and each animation corresponds to a totally different layer/shape — so my intuition was that I could somehow animate the hiding / showing of each layer (maybe that's what you mean re: using the mix param).

[umberto-sonnino]

Hey @teesloane, I took a look at your original Flare file and I noticed that you have keyframes for hiding shapes in each animation (i.e., Opacity is 0), but don't have a keyframe to set the visibility back.

In fact, in Flare (Editor) each property is reset to their Setup state when an animation is selected in the Animations list.
In this runtime, though, the properties are kept in place. That allows for animation mixing (i.e., values keep propagating forward), but it also means that if you hide something, it stays hidden.

You might want to try to add a keyframe for Opacity for the elements that should be visible in the running animation, and retry with your single-file approach!

Also, you can swap animations at runtime by passing in a parameter to the widget:

String _animationName = "Triangle";
[...]
FlareActor(
  "assets/metro.flr",
  alignment: Alignment.center,
  fit: BoxFit.contain,
  animation: _animationName,
)

And then on the slider callback:

onChanged: (double val) {
  if (val > 3) {
    _animationName = "Square";
  }
}

[teesloane]

Oh wow, this is great—I'll do a refactor as soon as I get a chance and will report back! Thanks for your help @umberto-sonnino. I'll close this issue now.