IMPLICIT EXPLICIT HERO IOS

ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

ANIMATION
AND
EFFECTS
GROUP VISION
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

TABLE OF CONTENTS
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

‍‍🏫👩‍🏫
INTRODUCTION
Want to improve the user
experience?

Want to have a more professional

look despite your simple app?

Want to create an app that’s close to

a real world experience ?
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

ANIMATION
Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a
polished app, and improve the user experience.
 
Flutter’s animation support makes it easy to implement a variety of animation types. Many
widgets, especially Material widgets, come with the standard motion effects defined in their design
spec, but it’s also possible to customize these effects.

We have two types of animation in flutter:

 Implicit animation
 Explicit animation
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

IMPLICIT
ANIMATION
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

IMPLICIT
This animations the most straightforward way to add animations to your app. You don’t have to be an
expert on animations or animation terminology to add animations to your app.

The implicit animation could be separated into two types:

 built-in widgets
 customized widgets(tween animation builder).

There are some properties:

Curve: The official document is clear and sweet in that they show all the inherent curve behaviors in
videos. So on the off chance that you need to change the animation curve, pick what you need.
Duration: This is a real sense that implies the duration of the animation. It very well may be days,
hours, minutes, seconds, milliseconds, even microseconds.

San Samir
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

Common Types of built-in widgets:

Various implicitly animated widgets transport with the framework. They are typically named
AnimatedFoo where Foo is the name of the non-animated rendition of that widget. There are
some regularly utilized implicitly animated widgets include:

 AnimatedAlign, which is an implicitly animated version of Align.

 AnimatedContainer, which is an implicitly animated version of Container.
 AnimatedDefaultTextStyle, which is an implicitly animated version of DefaultTextStyle.
 AnimatedOpacity, which is an implicitly animated version of Opacity.
 AnimatedPadding, which is an implicitly animated version of Padding.
 AnimatedPositioned, which is an implicitly animated version of Positioned.
 AnimatedCrossFade, which cross-fades between two given children and animates itself
between their sizes.
 AnimatedSize, which automatically transitions its size over a given duration.
 AnimatedSwitcher, which fades from one widget to another.

San Samir
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

Animated Container

San Samir
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

Animation Curves

San Samir
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

Animated Align &

Animated Default Text Style

San Samir
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

And for the widgets that don’t have built-in implicit animation, we can create animation for them
with:

Tween animation builder

For example:
for rotating a container or icon or any widget we don’t have a widget such as AnimatedAngle or
AnimatedRotate so here we must use TweenAnimationBuilder(), and we give it a child for that
widget to make it rotate.

Ramina Romel
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

Ramina Romel
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

EXPLICIT
ANIMATION
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

What is explicit animation ? when

do we use it?
Explicit animations are a set of controls for telling
Flutter how to rapidly rebuild the widget tree while
changing widget properties to create animation
effects

Melissa Mahdi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

There two types of explicit

animation
the first type is built in within flutter. the
second type is the custom explicit
animation which can be customized as
the user pleases

Melissa Mahdi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Animation Controller
Explicit animations require an Animation Controller. They are
called “explicit” because they only start animating when
explicitly asked to.

Animation Controller − Special Animation object to control the

animation itself. It generates new values whenever the
application is ready for a new frame. And provides us with the
listener which gets called when the animation value changes.

Melissa Mahdi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Size
transition
 allows you to arrange and maintain a set of
Animation Clips and associated Animation
Transitions.

 One of the prosperities of size Transition is size

Factor which specifies the type of animation.

 Animation is a generic class. The generic class

for the size transition is double

Melissa Mahdi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Fade
Transition
 Animates the opacity of a widget

 One of the prosperities of Fade

Transition is opacity which specifies
the type of animation.

 The generic class for the fade

transition is double

Melissa Mahdi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Rotation
Transition
 animates the rotation of the
widget

 One of the prosperities of Rotation

Transition is turns which specifies
the type of animation.

 The generic class for the rotation

transition is double

Melissa Mahdi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Scale
Transition:
 animates the scale of the
transformed widget

 One of the prosperities of Scale

Transition is Scale which specifies
the type of animation.

 The generic class for the rotation

transition is double

Melissa Mahdi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Align
transition
 The generic class for the align
transition is Alignment Geometry

 One of the prosperities of Align

transition is Alignment which
specifies the type of animation.

Majd Alfi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Slide
transition
 The generic class for the slide
transition is offset

 One of the prosperities of Slide

transition is Position which
specifies the type of animation.

Majd Alfi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Default Text
Style Transition
 The generic class for the
DefaultTextStyle Transition is TextStyle

 One of the prosperities of

DefaultTextStyle Transition is Position
which specifies the type of animation.

 Only Text is allowed

Majd Alfi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

DecoratedBox
Transition
 The generic class for the
DecoratedBox Transition is Decoration

 One of the prosperities of

decoratedBox Transition is decoration
which specifies the type of animation.

Majd Alfi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION

 
ANIMATION ANIMATION ANIMATION ANIMATION

Positioned
Transition
 The generic class for the Positioned
Transition is Relative Rect

 Only works if it's the child of a Stack.

 One of the prosperities of Positioned

transition is Rect which specifies the
type of animation.

Majd Alfi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Custom Explicit
Animation
We have two ways to create
custom explicit animation
 Animated builder
 Animated widget
instead of addListener() and setState()to
create a widget that animates.
We use animated builder and animated
widget.
although both do the same work but both
have different ways of doing it.
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

❏
 In AnimatedWidget it has its own child so we have to
pass only the animation. And is implemented as a
class extending AnimatedWidget.

❍  AnimatedBuilder takes two arguments "child" and

 
"animation" so we need to pass both of them.

 An AnimatedBuilder understands how to render the transition.

 An AnimatedBuilder doesn’t know how to render the widget, nor does it manage the Animation object.

 Use AnimatedBuilder to describe an animation as part of a build method for another widget.

 If you simply want to define a widget with a reusable animation, use an animated widget
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

HERO
ANIMATION
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Hero Flying an image from one screen to another

is called a hero animation in Flutter, though
the same motion is sometimes referred to as a

Animation  shared element transition.

 Flutter has a hero widget it will

automatically create a hero
transition between two navigator
routes.

 Hero animation has main property

which is tag: this property identifies
specific widget which needs to be
animated across consequent
screens.
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

Standard Hero Animation

A standard hero animation flies the
hero from one route to a new
route, usually landing at a
different location and with a
different size

Radial hero animation

In radial hero animation, as the hero
flies between routes its shape
appears to change from circular
to rectangular.
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

What’s the ‍♀️️

🤷‍
point?  Using two hero widgets in different routes. With
matching tags to implement the animation.

 This tag has to be unique in a widget tree.

 Pushing a route on or popping a route from the

navigator’s stack triggers the animation

 Hero has two types

Standard hero animation
Radial hero animation
 IMPLICIT EXPLICIT HERO IOS
ANIMATION
ANIMATION ANIMATION ANIMATION ANIMATION

📱
IOS
ANIMATION
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

IOS
Animations
 Some iOS animations are just
magical. 

 animations should help the user to

achieve the goal or to solve some
specific task inside the app. It’s not
an art, it’s a functional element.

In iOS, animations are

used extensively to reposition views, change their size.
You might use animations to convey feedback
to the user or to implement interesting visual effects.

Majd Alfi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

Coding UIView’s animation

With UIKit, it’s the easiest
way to implement your code!

Time 🙈 🙉
very straight forward API to
use as a beginner.

Majd Alfi
 IMPLICIT EXPLICIT HERO IOS
ANIMATION ANIMATION
ANIMATION ANIMATION ANIMATION

CONCLUSION
Animation is not only used to polish up the app.it
can be used to give feedback to the users, it
could tell the user that the function has started
executing to keep the user uptodate on what
the app is doing which can improve the user
experience.

🙇
THANK
YOU