Animation in Flutter (Task 6)

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.

Choosing an approach

There are different approaches you can take when creating animations in Flutter. Which approach is right for you?

Animation types

Generally, animations are either tween- or physics-based. The following sections explain what these terms mean, and point you to resources where you can learn more.

Tween animation

Short for in-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the end point.

Now Lets get started building simple rotate animation:

Animation

The primary building block of the animation system is the Animation class. An animation represents a value of a specific type that can change over the lifetime of the animation. Most widgets that perform an animation receive an Animation object as a parameter, from which they read the current value of the animation and to which they listen for changes to that value.

Animation­Controller

To create an animation, first create an AnimationController. As well as being an animation itself, an AnimationController lets you control the animation. For example, you can tell the controller to play the animation forward or stop the animation. You can also fling animations, which uses a physical simulation, such as a spring, to drive the animation.

Once you’ve created an animation controller, you can start building other animations based on it. For example, you can create a ReverseAnimation that mirrors the original animation but runs in the opposite direction (from 1.0 to 0.0). Similarly, you can create a CurvedAnimation whose value is adjusted by a Curve.

@override
void initState() {
// TODO: implement initState
super.initState();
animationController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));

Tweens

To animate beyond the 0.0 to 1.0 interval, you can use a Tween<T>, which interpolates between its begin and end values. Many types have specific Tween subclasses that provide type-specific interpolation. For example, ColorTween interpolates between colors and RectTween interpolates between rects. You can define your own interpolations by creating your own subclass of Tween and overriding its lerp function.

animation =
Tween<double>(begin: 0.0, end: 6.28).animate(animationController);
animationController.forward();//This will Initially start the animation after this we can check the status of animation using animation status listener. 

Now add a Animation listener. to control the animation.

animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
animationController.fling();
}
});

Now add the widget on which we have to apply the animation .

@override
Widget build(BuildContext context) {
return Center(
child: AnimatedLogo(
animation: animation,
));
}
}
class AnimatedLogo extends AnimatedWidget {
final Tween<double> _sizeAnim = Tween<double>(begin: 0.5, end: 1.5);
AnimatedLogo({Key key, Animation animation})
: super(key: key, listenable: animation);
@override
Widget build(BuildContext context) {
final Animation animation = listenable;
// TODO: implement build
return Transform.rotate(
angle: animation.value,
child: Transform.scale(
scale: _sizeAnim.evaluate(animation),
child: Container(
width: 50,
height: 50,
child: Image.network(
'https://www.mozilla.org/media/protocol/img/logos/firefox/logo-lg-high-res.7ba3ce88e665.png'))));
}
}

Final Result: Git hub link : https://github.com/sparsh308/Flutter-Animation-Example