oday we cannot imagine any Mobile App without animations. When you move from one page to another, tap a Button (or InkWell)… there is an animation. Animations are everywhere. Using Animation makes your application more interactive and makes your users excited to use the application. Ex: Twitter Likes animation, ioS swipe down list animation (Bouncing animation), Barchart animation , Facebook shimmer effect Implicit Animation Three Pillar of Animation The Ticker An Animation An Animation Controller

1. Animate With

2. Khushbu Thakker
@KhushbuThakker
Android & Flutter Developer
Hyperlink Infosystem
khushbuthakker1210@gmail.com
https://github.com/khushbuThak
ker/

3. What is Animation??
● Animated c
● Using Animation makes your application more interactive and
makes your users excited to use the application.
● Today we cannot imagine any Mobile App without animations.
When you move from one page to another, tap a Button (or
InkWell)… there is an animation. Animations are everywhere.
● Ex: Twitter Likes animation, ioS swipe down list animation
(Bouncing animation), Barchart animation , Facebook shimmer
effect

4. Two Categories
Tween Animation Physics Based-
Animation

6. Implicit Animation
● Flutter includes a series of widgets that are animated version of existing that
you are:
● These widgets automatically animate changes to their properties
When you rebuild the widget with new value with Stateful widget’s set state,
widget will handle animation from previous value to new value
○ Align -> AnimatedAlign , Container -> AnimatedContainer
○ DefaultTextStyle -> AnimatedDefaultTextStyle
○ Opacity -> AnimatedOpacity
○ Padding -> AnimatedPadding, Positioned -> AnimatedPositioned

7. Three Pillar of Animation
1. The Ticker
2. An Animation
3. An Animation Controller

8. Animation Class
● Flutter renders everything to the screen itself without depend on native views
● An Animation is nothing else but a value (of a specific type) that can change
over the lifetime of the animation.
● With Flutter’s animation library, you can add motion and create visual
effects for the widgets in your UI.
● It is unaware of what is happening on the screen because it’s not bound to
any view on the screen, But it has listeners to check out the state of the
animation during each frame change.

9. Animation Controller
● An animation controller is, as the name suggests, a way to control (trigger,
fling or stop) an animation.
● The Animation Controller : Subclass of Animation.
● Define the Lower bound and Upper bound (Default : 0 to 1)
● Needs Ticker Provider
● Every Flutter animation needs at least two elements to be created:
A Tween to get generate values for the animation
An Animation Controller as parent

10. ● The Animation Controller also gives us control over how the animation
behaves.
○ Dismissed - stopped at the beginning
○ Forward - animating in forward direction (0 to 1)
○ Completed - stopped at the end
○ Reverse - animating from 1 to 0

11. The Ticker
● In simple words, a Ticker is a class which sends a signal at almost regular
interval (around 60 times per second). Think of your watch which ticks at
each second.
● At each tick, the Ticker invokes callback method(s) with the duration since
the first tick, after it was started.
IMPORTANT
All tickers, even if started at different times, will always be synchronized.
This is very useful to synchronize animations

12. Tween Animation
● Short for in-betweening.
● In tthe 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.
● Changing the value range and even the type of the output value (e.g. to a
Color) is possible with a Tween. There are many pre-built ones such as
ColorTween or TextStyleTween.

13. Initial
Final
-

14. Hero Widget

15. Key Points
● Widget that flies from one screen to another
● This animation style is commonly known as Shared element transitions or Shared element
animations
● Two hero widgets in different routes with same tag name
● Navigator manages stack containing app’s routes
● Pushing or Popping a route triggers the animation
● timeDelation property makes the animation slow as per our given time

16. Behind the scenes - How Hero works?

17. - Before transition, source Hero waits in source route widget tree.
- Overlay is Empty.
- Destination route does not yet exists.

18. Pushing route to navigator triggers animation at t = 0.0
- Calculates Destination Hero’s path, off screen,u sing curved motion
- Places Destination Hero in Overlay, at same location and size as Source Hero

19. - As hero flies, its rectangular bounds are animated using
CreateRectTween property

20. When flight completes
- Hero widget will be moved from Overlay to Destination.
- Overlay is empty now.
- Destination Hero appears in its final position in the Destination route.
- Source Hero is restored to its route.

21. 1) Standard Hero Animation
- Specify route using MaterialPageRoute, CupertinoPageRoute or custom route
using PageRouteBuilder
- Change the size of Image at the end of Transition by wrapping the
Destination’s Image in SizedBox
- Change the location of the Image by placing the Destination’s Image in a
Layout Widget

22. 2) Radial Hero Animation
- Animates Circular shape into Square shape
- MaterialRectCenterArcTween defines the tween animation by interpolating
two tweens using the center point of each Hero
- Build destination route using PageRouteBuilder

24. Dhruva Shastri
@dhruvashastri12
Business Developer
All Events
Ambassador
WTM Ahmedabad