Scribd
Upload
34 views15 pages

App Development6

App_development6

Uploaded by

sameeha moogab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views15 pages

App Development6

App_development6

Uploaded by

sameeha moogab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Flutter – Animation

Sameeha moogab
2024
Outline
• What is Animation
• Aspects of the animation
• Animation System
What is Animation
• Animation is a process of showing a series of
images / picture in a particular order within a specific
duration to give an illusion of movement.
Aspects of the animation
The most important aspects of the animation are as
follows:
• Animation have two distinct values: Start value and
End value. The animation starts from Start value and
goes through a series of intermediate values and
finally ends at End values. For example, to animate a
widget to fade away, the initial value will be the full
opacity and the final value will be the zero opacity.
Aspects of the animation
• The intermediate values may be linear or non-linear
(curve) in nature and it can be configured.
Understand that the animation works as it is
configured. Each configuration provides a different
feel to the animation. For example, fading a widget
will be linear in nature whereas bouncing of a ball
will be non-linear in nature.
Aspects of the animation
• The duration of the animation process affects the speed
(slowness or fastness) of the animation.
• The ability to control the animation process like starting the
animation, stopping the animation, repeating the animation
to set number of times, reversing the process of animation,
etc.
Animation System
• In Flutter, animation system does not do any real animation.
Instead, it provides only the values required at every frame to
render the images.
Animation
• Generates interpolated values between two numbers over a
certain duration. The most common Animation classes are:
Animation<double> - interpolate values between two
decimal number

Animation<Color> - interpolate colors between two color

Animation<Size> - interpolate sizes between two size


The Flutter Animation Framework?
• Flutter provides a robust and reliable animation
framework that eases the development of
animations. Let’s have a look at some of the essential
components of the Flutter app’s framework:
AnimationController
• It controls the timing and playback of an animation in
your Flutter app. It allows the user to describe a
duration ,curve ,and animation loop or reverse.
AnimationController controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
);
Tween Animation
• It defines a range of values that an animation should
interpolate between. If you want to animate a widget
position from one point to another, use a
Tween<Offset>in your example.
Animation<Offset> positionAnimation = Tween<Offset>(
begin: Offset(0, 0),
end: Offset(100, 100),
).animate(controller);
AnimatedBuilder
• It is a handy tool for creating widgets that are based on
animation.It also allows you to rebuild a part of your UI tree
when ever the animation value changes.Let’s have a look at a
simple example of how to use AnimatedBuilder:
Work flow of the Flutter Animation
• Define and start the animation controller in the
initState of the StatefulWidget.
AnimationController(duration: const Duration(seconds: 2),
vsync: this);
animation = Tween<double>(begin: 0, end:
300).animate(controller);
controller.forward();
Work flow of the Flutter Animation
• Add animation based listener, addListener to change
the state of the widget
animation = Tween<double>(begin: 0, end: 300).animate(controller)
..addListener(() {
setState(() { // The state that has changed here is the
animation object’s value. });
});
Work flow of the Flutter Animation
• Build-in widgets, Animated Widget and
AnimatedBuilder can be used to skip this process.
Both widget accepts Animation object and get
current values required for the animation.
• Get the animation values during the build process of
the widget and then apply it for width, height or any
relevant property instead of the original value.

You might also like