-
Notifications
You must be signed in to change notification settings - Fork 468
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple Animations Simultaneously #10
Comments
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 FlutterWe'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
ControllersIf 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 GeneralYou 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:
You can then apply them both as follows:
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. |
Hi! How can I make 2 different animations show their final states? Like having both mixed at 1.0 each. |
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?
The text was updated successfully, but these errors were encountered: