Fun with Flutter Animations

My slides for "Fun with Flutter Animation" from DevFest Ahmedabad 19.

Animated version of slides: https://docs.google.com/presentation/d/1qunoQl-oIPRDtXSvWw-eTImvc2K8DXqB865w5UqSEDQ/edit?usp=sharing

Transcript

1. Divyanshu Bhargava @divyanshub024 Fun with Flutter Animations
2. Who am I?
3. What is Animation? A sequence of images or frames.
4. What is Animation? A FUN sequence of images or frames.
5. Examples
6. Examples by me
8. “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
9. Why Animations are important?
10. Loading...
12. Story of Progress Bar
13. Progress Bar Is just an indicator to show something is happening on the device.
14. Brad A. Myres It does not matter if progress bar gives you accurate progress. What matters was that a progress is there.
15. Understanding Motions Motion helps make a UI expressive and easy to use.
16. Motion shows relationships between elements, which actions are available, and what will happen if an action is taken. Informative Motions
17. Motion focuses attention on what's important without creating unnecessary distraction. Focused Motions
18. Motion celebrates moments in user journeys, adds character to common interactions, and expresses a brand’s personality and style. Expressive Motions
20. 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
21. Base concepts of animation
22. 3 pillars of animation Ticker Animation Animation Controller
23. 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
24. 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
26. Ticker class - Calls its callback once per animation frame. - around 60 times per second.
27. Curves
29. Live Demo
30. 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
31. AnimatedWidget - AnimatedBuilder - AlignTransition - DecoratedBoxTransition - DefaultTextStyleTransition - PositionedTransition - RelativePositionedTransition - RotationTransition - ScaleTransition - SizeTransition - SlideTransition - FadeTransition - AnimatedModalBarrier
32. 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.
33. Animated Container
34. ImplicitlyAnimatedWidget - Automatically animate changes in their properties. - Automatically manage their own internal AnimationController. - Can only change duration and curve for the animation.
35. ImplicitlyAnimatedWidget - AnimatedAlign - AnimatedContainer - AnimatedDefaultTextStyle - AnimatedOpacity - AnimatedPadding - AnimatedPhysicalModel - AnimatedPositioned - AnimatedPositionedDirectional - AnimatedTheme - AnimatedCrossFade - AnimatedSize - AnimatedSwitcher
36. 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.
37. Navigation transition
38. To Push: Android
39. To Push: Android
40. To Push: iOS
41. Hero Animation
42. Hero widget - Hero is a widget that flies between screens. - implemented using two Hero widgets
47. Canvas Animation
48. 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
51. Crack the animation
52. Crack the animation
53. Physics based Animation
54. 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
55. Bonus: Flare
56. Flare examples
57. 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.
58. - Real assets. - No rebuilding in code. - Manipulate anything at runtime. - Open source. Why Flare matters?
59. What’s Next?
60. Divyanshu Bhargava @divyanshub024 Thank you