Fun with Flutter Animations

Slide 1

Slide 1 text

Divyanshu Bhargava @divyanshub024 Fun with Flutter Animations

Slide 2

Slide 2 text

Who am I?

Slide 3

Slide 3 text

What is Animation? A sequence of images or frames.

Slide 4

Slide 4 text

What is Animation? A FUN sequence of images or frames.

Slide 5

Slide 5 text

Examples

Slide 6

Slide 6 text

Examples by me

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

“To think creatively, we must be able to look afresh at what we normally take for granted” - George Keller “Animation is about creating the illusion of life. And you can't create it if you don't have one.” - Brad Bird

Slide 9

Slide 9 text

Why Animations are important?

Slide 10

Slide 10 text

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Story of Progress Bar

Slide 13

Slide 13 text

Progress Bar Is just an indicator to show something is happening on the device.

Slide 14

Slide 14 text

Brad A. Myres It does not matter if progress bar gives you accurate progress. What matters was that a progress is there.

Slide 15

Slide 15 text

Understanding Motions Motion helps make a UI expressive and easy to use.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Motion focuses attention on what's important without creating unnecessary distraction. Focused Motions

Slide 18

Slide 18 text

Motion celebrates moments in user journeys, adds character to common interactions, and expresses a brand’s personality and style. Expressive Motions

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Animations Type Tween Animation Physics-based Animation - In-between. - Models path between start and end point. - curve that defines the timing and speed of the transition - Animations with resemble real-world behavior. - Whenever possible, apply real-world physics so they are natural-looking. Linear Curve Fling Spring

Slide 21

Slide 21 text

Base concepts of animation

Slide 22

Slide 22 text

3 pillars of animation Ticker Animation Animation Controller

Slide 23

Slide 23 text

Animation 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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Ticker class - Calls its callback once per animation frame. - around 60 times per second.

Slide 27

Slide 27 text

Curves

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Live Demo

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

AnimatedWidget - AnimatedBuilder - AlignTransition - DecoratedBoxTransition - DefaultTextStyleTransition - PositionedTransition - RelativePositionedTransition - RotationTransition - ScaleTransition - SizeTransition - SlideTransition - FadeTransition - AnimatedModalBarrier

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

Animated Container

Slide 34

Slide 34 text

ImplicitlyAnimatedWidget - Automatically animate changes in their properties. - Automatically manage their own internal AnimationController. - Can only change duration and curve for the animation.

Slide 35

Slide 35 text

ImplicitlyAnimatedWidget - AnimatedAlign - AnimatedContainer - AnimatedDefaultTextStyle - AnimatedOpacity - AnimatedPadding - AnimatedPhysicalModel - AnimatedPositioned - AnimatedPositionedDirectional - AnimatedTheme - AnimatedCrossFade - AnimatedSize - AnimatedSwitcher

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

Navigation transition

Slide 38

Slide 38 text

To Push: Android

Slide 39

Slide 39 text

To Push: Android

Slide 40

Slide 40 text

To Push: iOS

Slide 41

Slide 41 text

Hero Animation

Slide 42

Slide 42 text

Hero widget - Hero is a widget that flies between screens. - implemented using two Hero widgets

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Canvas Animation

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Crack the animation

Slide 52

Slide 52 text

Crack the animation

Slide 53

Slide 53 text

Physics based Animation

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Bonus: Flare

Slide 56

Slide 56 text

Flare examples

Slide 57

Slide 57 text

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.

Slide 58

Slide 58 text

- Real assets. - No rebuilding in code. - Manipulate anything at runtime. - Open source. Why Flare matters?