🎠Animate multiple properties in Flutter
Today I want to cover another aspect of the new Simple Animations 2. MultiTween enables your easily define a tween that animes multiple properties at once or create chained animations.
In a regular tween you usally describe the animation behavior of a single property. For example a double value for awidth of an animated container widget:
var tween = Tween(begin: 0.0, end: 100.0);
But what if we also want to animate it’s height or color?
Things get complex. Either we use an AnimationController with three Animation<?> properties and wire everything up. Or we change the tween to something like a progress. Therefor we tween from 0.0 to 1.0 and use math to apply different values: width = progress * 100.0; and height = progress * 200.0 .
But all of this isn’t cool at all. This is a job for MultiTween. It’s a type-safe way to define complex animations.
First we define an enum with all properties: enum _AniProps = { width, height, color }
Next we create a new MultiTween and use it’s add method to define the behavior of all properties:
Behind the scenes MultiTween computes all the math for you. MultiTween animates into a class classed MultiTweenValues . You can simply use it’s get method to access the animated values.
Here is a complete example:
… that looks like this:
You can also watch a step-by-step example as a 3min screencast:
MultiTween is also perfect for creating chained animation, like this:
You can start using MuliTween by adding Simple Animations to your project. There is a complete documentation about using MultiTween.
Happy Animating!
— Felix —
