Introduction

Animations in a mobile app adds interactivity to the UI as well as some visual effects to it. Animations, when used correctly, can make a huge difference in how user perceives your app. Every mobile developer wish to add animations in their app, but, they are unsuccessful in doing so, because, there is a lot of complexity and lot of things, a developer has to learn before adding animations.

That’s where Flutter comes in…

Flutter has a very good Animation library that allows you to create complex animations that can run constantly at 60 frames per second very easily.

Overview

In this blog post, I’ll tell you about basics/foundation animation concepts in Flutter that allows you add complex animations very easily.

1. Animation Class

All the animations in Flutter are provided by Animation class. According to the documentation, Animation contains a generic type variable Animation<T> which means that what type of value should should be animated. Most common type of Animation used is Animation<double>

To create and run the animation, we need Animation and AnimationController objects. We’ve seen the Animation class in the above section. In the next section, Let’s see the AnimationController class

2. AnimationController

It is basically a controller for animation, which lets you to perform various operations with the current animation

Play an animation either in forward or in reverse direction.

or in direction. Pause current playing animation

Stop current playing animation

Define range of animation — min and max value

Syntax of AnimationController

In line 7, we are providing SingleTickerProviderStateMixin with the _HomeScreenState class which basically means that we are providing Ticker with the help of SingleTickerProviderStateMixin class and linking it with this class.

Ticker is nothing, but a class which sends a signal at almost regular interval (e.g. Like watch ticks at every second). At each tick, the Ticker invokes it’s callback method(s)

In line 14, object of AnimationController is initialised, and it expects 2 parameters — vsync and duration

vsync property binds the AnimationController object with the Ticker and duration specifies the time till which given animation will run.

In line 15 , we’re attaching the listener with AnimationController object and calling setState() which ensures that, each time the value changes, the Widget is rebuilt

, we’re attaching the listener with and calling which ensures that, each time the value changes, the Widget is rebuilt In line 18 , animation is started using forward() function provided by AnimationController

, animation is started using function provided by At last, make sure to dispose the given AnimationController object in dispose() method.

Now, you understood the basic concepts of Animation, now, Let’s see the different types of animation

Basic Types of Animation

Tween

Curved

Tween Animation

Tween Animation is the type of animation which interpolates between the given range. It linearly interpolates between the begin and end value. In the case of Animation<double>, it linearly interpolates between only double values, but, in the case of Tween, it can interpolates between colors, borderRadius, etc.

In the above code, Tween animation is initialised by giving it’s begin and end value. In this case, we’re specifying 0.0 and 1.0 for begin and end respectively that means it’ll linearly interpolates between 0.0 and 1.0 values and at last, call the animate method and specify the type of animation inside it.

If you want to interpolate between BorderRadius, then, either specify BorderRadiusTween or Tween<BorderRadius>

CurvedAnimation

CurvedAnimation is the type of animation which applies curve to the animation. It provides many different types of curves such as easeIn, fastOutSlowIn, easeOut, bounceIn, and many more. Animation applied through CurvedAnimation follows non-linear curve.

To have a better visual look of different types of curves, head over to this

link

First, initialise the AnimationController and after specifying the range of animation with the help of Tween, then specify the CurvedAnimation. CurvedAnimation expects two parameters which are required and one optional parameter —