Fun with

Flutter Animations

Divyanshu Bhargava
@divyanshub024
Who am I?
What is Animation?

A sequence of images or frames.

What is Animation?

A FUN sequence of images or frames.

Examples
Examples by me
“Animation is aboutwe
“To think creatively, creating
must bethe
illusion
able to of life.
look And you
afresh can'twe
at what create it
if you don't
normally takehave
for one.”
granted”
- Brad
George
Bird
Keller
Why Animations are important?
Loading...
Story of Progress Bar
Progress Bar

Is just an indicator to show

something is happening on the
device.
Brad A. Myres

It does not matter if progress

bar gives you accurate progress.
What matters was that a
progress is there.
Understanding Motions

Motion helps make a UI expressive and easy to use.

Informative
Motions
Motion shows relationships
between elements, which actions
are available, and what will happen
if an action is taken.
Focused Motions

Motion focuses attention on what's

important without creating
unnecessary distraction.
Expressive
Motions
Motion celebrates moments in user
journeys, adds character to
common interactions, and
expresses a brand’s personality and
style.
 Animations Type
Tween Animation Physics-based Animation

- In-between. - Animations with resemble

- Models path between start and real-world behavior.
end point. - Whenever possible, apply
- curve that defines the timing and real-world physics so they are
speed of the transition natural-looking.

Linear Curve Fling Spring

Base concepts of animation
 3 pillars of animation

Ticker Animation Animation

Controller
Animation<T> class
- An animation with a value of type T.
- Animation is nothing else but a value that change in a life span.
- Value change can be linear or curve
AnimationController class
- A controller for an animation.
- Can start, stop, repeat animation.
- Set the animation to a specific value.
- Define the upperBound and lowerBound
values of an animation. (default 0.0 - 1.0)
- Duration of animation.
- Needs Ticker Provider
Ticker class
- Calls its callback once per animation frame.
- around 60 times per second.
Curves
Live Demo
AnimatedWidget
- An abstract class that allows you to separate out the core widget
code from animation code.
- Rebuilds when the given Listenable changes value.
- AnimatedWidgets (and their subclasses) take an explicit
Listenable as argument.
- The lifecycle of that AnimationController has to be managed
manually by the developer
AnimatedWidget
- AnimatedBuilder
- AlignTransition
- DecoratedBoxTransition
- DefaultTextStyleTransition
- PositionedTransition
- RelativePositionedTransition
- RotationTransition
- ScaleTransition
- SizeTransition
- SlideTransition
- FadeTransition
- AnimatedModalBarrier
AnimatedBuilder
- AnimatedBuilder is useful for more complex widgets that wish to
include an animation as part of a larger build function.
- A general-purpose widget for building animations.
Animated Container
ImplicitlyAnimatedWidget
- Automatically animate changes in their properties.
- Automatically manage their own internal AnimationController.
- Can only change duration and curve for the animation.
ImplicitlyAnimatedWidget
- AnimatedAlign
- AnimatedContainer
- AnimatedDefaultTextStyle
- AnimatedOpacity
- AnimatedPadding
- AnimatedPhysicalModel
- AnimatedPositioned
- AnimatedPositionedDirectional
- AnimatedTheme
- AnimatedCrossFade
- AnimatedSize
- AnimatedSwitcher
AnimatedContainer
- Animated version of Container.
- The AnimatedContainer will automatically animate between the old and
new values of properties when they change
- Its child and descendants are not animated.
Navigation transition
To Push: Android
To Push: Android
To Push: iOS
Hero Animation
Hero widget
- Hero is a widget that flies between
screens.
- implemented using two Hero widgets
Canvas Animation
CustomPainter and CustomPaint
- CustomPainter Interface used by CustomPaint and
RenderCustomPaint.
- CustomPaint is a widget that provides a canvas on which to draw
during the paint phase.
- CustomPaint subclasses must implement the paint and shouldRepaint
methods
Crack the animation
Crack the animation
Physics based Animation
Spring Simulation
- A spring simulation.
- Models a particle attached to a spring that follows Hooke's law.
- “Hooke's law states that the force (F) needed to extend or compress a
spring by some distance x scales linearly with respect to that distance.”
- F = Kx
Bonus: Flare
Flare examples
 What is Flare?

Flare is a powerful design and animation tool, which allows

designers and developers to easily add high-quality animation
to their apps and games.
 Why Flare matters?

- Real assets.
- No rebuilding in code.
- Manipulate anything at runtime.
- Open source.
What’s Next?
Thank you

Divyanshu Bhargava
@divyanshub024