Well-designed animations enhance the user experience by making a UI feel more natural. They also add to the slick look and feel of a polished app. Flutter’s animation support allows a number of animation styles to be simple to introduce. Many widgets, especially Material widgets, have standard motion effects specified in their design spec, but these effects can also be customized.
Animation is a very important aspect and powerful concept in Flutter. When it comes to using or creating any mobile app, you cannot imagine any app without animation.
It changes the way you see things. Animation directly catches anyone’s attention. Follow the recomenadation to add a lit bit of advanced animation to spice up the user experience of your mobile application.
“Animation is not the art of drawing that move but the art of movements that are drawn.” – Norman McLaren
Creating some astonishing animations for your mobile app is the base and the most important thing in any application.
Interesting Fact: Around 5,00,000 developers use Flutter monthly according to Google and with more than 2 million developers, flutter uptick in enterprise use.
Flutter offers an exquisite support for animation where it separates the animation into two main categories, that are:
- Tween Animation
- Physics-Based Animation
Let’s get rolling with both type of animation.
#1 TWEEN ANIMATION
Tweening” is how to flutter animators create all types of animation, including computer animation. This process generates and includes frames between two images. These frames, that come in between two images are called key Frames.
It’s the abbreviated version of in-betweening. In a tween animation, the start and endpoints of the animation must be specified. It means that the animation starts with the start value and progresses through a sequence of intermediate values before arriving at the end value. Moreover, it also includes a timeline and curve that describe the transition’s duration and pace.
It also offers an appearance where the first image evolves smoothly to the second image.
TweenAnimationBuilder is here for all your needs without having to worry about the pesky animation controller.
Moreover, using TweenAnimationBuilder is easy. Thus, you can set the duration of any particular animation to the time you want it to run.
Using this syntax, you can set the length of the time according to your preference with duration parameter and then add your builder method to draw the widget you’ll be animating.
As you know, that the parameter type depends on what you’re animating.
The second parameter is dependent on what in your widget you’ll be animating. In this case, it holds the choice of Color valueyou wish to apply in the color filter.
At the end, specify the values that you want to animate between using the tween parameter
Note: The type of your tweenshould match the type of the second parameter in your builderand the Class type parameter, in case if you specify it.
Do this and there you go! You’ll get a working custom implicit animation.
To use a Tween object, call animate() on it with the controller object as the argument. For example, over the course of 300 milliseconds, the following code generates integer values ranging from 0 to 200.
Note: The animate() will return an Animation, not an Animatable.
TRANSITION WITH CURVE PARAMETER
If you wish to modify the way you animate from one value to another, You can set curve parameter by using the following code
Use the code in this way:
In Animation Notification, Listeners and StatusListeners adds to an Animation object using the addListener() and addStatusListener() methods (). When the animation’s value increases, a Listener gets call. Although, the most popular action of Listener is to call setState() to force a rebuild. When an animation starts, ends, moves forward, or reverses, according to AnimationStatus, a StatusListener gets a name. Thus, the addListener() method is demonstrated in the next section, and an example of addStatusListener is demonstrated in the section Monitoring the progress of the animation.
#2 PHYSICS-BASED ANIMATION
Physics-based Animation is a form of animation that lets you create an app’s interaction feel more realistic and interactive. It simulates real-world movement/animation, such as dropping, springing, or swinging with gravity, etc. As a result, it’s an animation that reacts to user movement or input.
The simplest example is the length of a trip, and the distance travelled will be measured using physics rules.
App interactions is done in more realistic and interactive way with the use of physics Animation.
Let’s understand it more clearly using the GravitySimulation example.
Initialized with acceleration, beginning point, ending point, and starting velocity, this class simulates gravity. In this example, 100 units of acceleration in this case, and our destination is zero to 500 with zero initial velocity.
upper bound: It could be a bug, or it could just be me. Since the AnimationController class value has a max and min limit, the simulation’s end location will not function as anticipated. Thus, the upper bound property’s default value is 1. If you’re using simulation and your controller. value is stuck at 1, you should adjust the upper-bound value.
control.animateWith: Thus, it tells the controller to use the simulation we set up in controller.animateWith. You’ll note that the period in the controller is not specified because the duration of the animation is calculated by the controller based on the parameters we set in our simulation.
Using a Spring Simulation, this step shows how to shift a widget from a dragged point back to the middle.
1st Step: Animation controller setup
2nd Step: Then, move the widget using gestures
3rd Step: Animating the Widget
4th Step: To simulate a springing motion, calculate the velocity
You may want to animate a widget to make it act like it’s connected to a spring or dropping with gravity, for example.
Here, Let’s take an example of Spring-simulation
Here, Because of the spring’s oscillation, the upperBound value is greater than the ending point in simulation parameters.
Except as otherwise noted, see how the parameters of SpringSimulation influence the animation in these GIFs.
So, we hope that you’re clear with flutter animation’s types, which are: Tween Animation and Physical-Based Animation. In the next part, we will discuss other types of flutter animation. Till then. Stay tuned!
Other than this, if you’re interested in gaining some interesting views on Flutter and Mobile App Development. Check out our Article on “Flutter vs. ReactNative vs. Xamarin” and “Mobile App Development Trends to follow in 2021”. If you liked this article, you’ll like others too.