Flutter Animations

Transcript

1. Flutter Animations Danvick Miller
2. Why Animate • Give Feedback • Draw users' attention • Indicate ongoing background tasks • Show progress • Indicate transition • Storytelling and Gamification 8 / 2 2 / 2 2 2
3. Types of animations in Flutter • Drawing-based animations • Code-based animations 8 / 2 2 / 2 2 3
4. Drawing-based animations • Stand-alone sprites • Transformations not possible on code • Raster or Vector based assets • Tools: Rive, Lottie 8 / 2 2 / 2 2 4
5. Code-based animations • Widget focused • Rooted in standard layout & style primitives - layouts, colors, styles • Types of code-based animations v Implicit Animations v Explicit animations 8 / 2 2 / 2 2 5
6. Implicit animations • Change widget property Flutter will do the animation • Easy to use - built-in as Flutter Widget or easily build your own • Gives less control of the animation process • Some are built in Flutter: AnimatedFoo where Foo is the Widget you want to animate. Examples: AnimatedContainer, AnimatedOpacity, AnimatedPadding, AnimatedSwitcher, AnimatedPositioned ect. • If you cannot find one in Flutter, use TweenAnimationBuilder to build your own 8 / 2 2 / 2 2 6
7. Explicit animations • Start animating when explicitly asked to • A bit complex to set up • Needs an AnimationController to control animation aspects like when to start, how to animate and when to stop • You have to manage the lifecycle of the animation - used inside a Stateful Widget 8 / 2 2 / 2 2 7
8. When to use Explicit Animations • When the animation repeats “forever” • When the animation is discontinuous • When multiple widgets are animating together in a co-ordinated fashion 8 / 2 2 / 2 2 8
9. How to use Explicit Animations • Built-in explicit animations - FooTransition where Foo is the property you want animated • Extend AnimatedWidget • Using AnimatedBuilder • Animating with CustomPainter - Paints directly on canvas (for performance gains) 8 / 2 2 / 2 2 9
10. Choosing how to animate 8 / 2 2 / 2 2 10