If you remember, we can compose multiple transformations by using the Matrix4 class. For animations, things are similar; we can combine animations, run one after another, and play them—it's all in our hands. To create a composed animation, we can simply create multiple transformation values based on a single Animation object.
By doing that, we can achieve something like this:
Thinking in a simple way, we can follow these steps:
- We can simply have multiple values defined in our class, like this:
class _ComposedAnimationsState extends State<ComposedAnimations>
with SingleTickerProviderStateMixin {
Offset _offset = Offset.zero;
double _scale = 1.0;
double _angle = 0.0;
...
}
- And whenever the animation value changes, we can calculate our values based on it:
animation.addListener(() {
setState(() {
_offset = Offset(animation.value * 70, animation.value *
200);
_scale = 1.0 + animation.value;
_angle = 360 * animation.value;
});
});
}
- And then, we apply the values we have calculated at each step of animation execution in our build() method:
_composedAnimationButton() {
return Transform.translate(
offset: _offset,
child: Transform.rotate(
angle: _angle * _toRadians,
child: Transform.scale(
scale: _scale,
child: RaisedButton(
child: Text("multiple animation"),
onPressed: () {
if (_animation.status == AnimationStatus.completed) {
_animation.reverse();
} else if (_animation.status ==
AnimationStatus.dismissed) {
_animation.forward();
}
},
),
),
),
);
}
This works, and for simple cases it's best to keep like this, as we have fewer objects to take care of and a single animation to play.
To make it more maintainable, however, it's better to separate the value calculation from the animation itself. That's how we can use Tweens; remember the Offset example, where it is calculated and we simply get the value ready for use.