Multiple Animations Simultaneously

[kautukkundan]

On Flare online tool, there's an option of playing multiple animation sets simultaneously. Like you make several animation and hit play button next to each of them. How do we do that in dart?

[luigi-rosso]

This will be a little long! We'll have specific documentation for all of this in the next few weeks. There are a few different ways to do this as well as some background necessary to understand how it works. If you just want to jump into code, take a look at the penguin example here which mixes a dancing animation on top of a walking one.

Fundamentals to Flare in Flutter

We've abstracted most of this away in the FlareActor widget, but this should help you understand what that is doing. There are five fundamental steps necessary to start rendering a Flare file (what we call in the code a Flare Actor). You can find a lot of this implemented in flare_actor.dart

1. Loading a FlutterActor with FlutterActor.loadFromBundle.
2. Getting or instancing the Artboard from the Actor. Actors can have multiple artboards, you can grab the default one by calling actor.artboard (or actor.artboard.makeInstance if you want to draw from the same actor multiple times and have them be in different states).
3. Applying any changes or animations desired to the artboard. For example, you can query for a part a component in the hierarchy and change its X translation, or query for an animation and apply it to the artboard.
4. Advancing the artboard. This updates any hierarchical transformations, constraints, etc that may be dirty. Animation or code can change the properties of components of the Flare hierarchy, this ensures anything that depends on those changes updates as well, should be done once before drawing.
5. Rendering with artboard.draw.

Controllers

If you want to have two animations playing simultaneously, you can either make a custom widget or use a custom FlareController much like the dancing penguin example here.

Note how the controller finds the animations it is interested in during initialization.

Then it applies the animation at the correct time with the correct mix value here. Note that this example actually mixes two animations: walk and music_walk. walk is always playing and music_walk is mixed on top of it. "walk" is provided as the default animation here.

The advance function is called before the actor renders. The controller advance function should return true if it needs to redraw on the next frame.

Multiple Animations in General

You can have multiple animations influence an artboard. You do this by applying animations in the order you wish to mix them on top of each other.

Say you have two animations like walk and run:

walk = artboard.getAnimation("walk");
run = artboard.getAnimation("run");

You can then apply them both as follows:

double timeInSeconds = 0.0;
double runMix = 0.5; // ramp this from 0-1 as you transition to run

walk.apply(timeInSeconds, artboard, 1.0);
run.apply(timeInSeconds, artboard, runMix);

You can imagine this being a mixer with faders for each animation. The mix value allows blending the animation results on top of the current state of the artboard. This allows for smoothly transitioning from one animation to another.

So if you wanted to smoothly transition from walk to run, you would ramp up the mix value of the run animation from 0.0 (not mixed in at all) to 1.0 (fully mixed in) as you transition to run. Then you'd bring it back down to 0 to go back to a walk.

[ionSurf]

Hi! How can I make 2 different animations show their final states? Like having both mixed at 1.0 each.

[ionSurf]

Hello again. There seems to be a problem when mixing using vertices editing. For example, while a square having 2 different animations, each one applying a x-scale and a y-scale respectively, the same transformation done using vertices does not achieve the same effect.

The 2 squares on the left have the same animation done differently, yet they do not render equally.