Multiple transformations and custom Tween

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:

  1. 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;
...
}
  1. 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;
});
});
}
  1. 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.216.239.46