Comments (3)
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
- Loading a FlutterActor with FlutterActor.loadFromBundle.
- 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).
- 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.
- 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.
- 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.
from flare-flutter.
Hi! How can I make 2 different animations show their final states? Like having both mixed at 1.0 each.
from flare-flutter.
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.
from flare-flutter.
Related Issues (20)
- Migrate to null safety HOT 8
- Add debug mode HOT 1
- Migration to Null-Safety HOT 3
- Request for Clarification: Flare-Flutter vs Rive Flutter Runtime Use Cases HOT 4
- LateInitializationError HOT 8
- Null Safety for flare_dart HOT 3
- Placeholder widget while animation is loading
- 3.0.0 antialiasing no longer working HOT 13
- IK Constraints not working HOT 4
- Difference between flare-flutter and rive-flutter HOT 4
- FlutterActorImage not visible FlareActor
- Clear Memory after finish an animation HOT 2
- Can't load FlareActor.bundle on Android HOT 2
- Unhandled Exception: Exception: LateInitializationError: Field '_paint@235459774' has not been initialized HOT 2
- LateInitializationError: Field '_paint@xxxxxx' has not been initialized HOT 2
- LateInitializationError: Field '_setupAABB@43245341' has not been initialized HOT 1
- Flutter 2.10 & 3.0 throw warnings during compilation HOT 3
- Warning: Operand of null-aware operation '?.' has type 'SchedulerBinding' which excludes null. HOT 4
- update HOT 1
- Flutter3 Error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flare-flutter.