Animations in Flutter

Animations in Flutter from Poznań Flutter Developer Group (PFDG)
- types of animations
- tween animations
- Flare

https://www.meetup.com/poznan-flutter-developers/
https://www.facebook.com/poznanflutter

Transcript

1. Poznan Flutter Developer Group Bartosz Kosarzycki Animations in Flutter 1 @bkosarzycki
2. Poznan Flutter Developer Group Agenda - Animation types - Tween animations, physics-based animation - Animated Container widget - Animated CrossFade widget - Hero animation - Flare overview - FlareActor, NimaActor - Expressive animations 2 For animated version of this presentation click HERE
3. Poznan Flutter Developer Group Animation types - Tween animations animate value over time - Physics-based animations animate in response to user input/movement, animation which include real-world physics - Animating widgets help to simplify animations - single responsibility 3 Animations in Flutter ARE INDEPENDENT from widgets they animate
4. Poznan Flutter Developer Group Tween animations - Short: in-between animations - start value, end value - curve [ function: transition over time ] 4 Tween<double>( begin: 0.0, end: 5.0, ) Tween<Position>( begin: Position(5.0, 10.0), end: Position(10.0, 15.0), )
5. Poznan Flutter Developer Group Tween animations 5
6. Poznan Flutter Developer Group Tween animations 6 ColorTween( begin: Colors.red, end: Colors.blue, ) var colorAnim = ColorTween( begin: Colors.red, end: Colors.blue, ).animate(_colorAnimController);
7. Poznan Flutter Developer Group 7
8. Poznan Flutter Developer Group Tween animations - implementation 8 @override void initState() { super.initState(); _simpleAnimController = AnimationController( vsync: this, duration: Duration(milliseconds: 1000)) ..addListener(() => setState(() {}) ); _simpleAnim = Tween< double>( begin: 50, end: 300, ).animate(_simpleAnimController); _simpleAnimController.forward(); } Center( child: Padding( padding: EdgeInsets.only(top: _simpleAnim.value), child: Container( width: 100, height: 100, child: FlutterLogo(), ), ), class _TweenAnimationPageState extends State<TweenAnimationPage> with TickerProviderStateMixin { AnimationController _simpleAnimController; Animation<double> _simpleAnim; [...]
9. Poznan Flutter Developer Group Tween animations - implementation 9
10. Poznan Flutter Developer Group Physics-based animations 10 simulation = ScrollSpringSimulation( SpringDescription( mass: 1.0, stiffness: 1.0, damping: 1.0, ), 0.0, // start value 1.0, // end value 0.0, // velocity ); @override Widget build(BuildContext context) { return GestureDetector( onPanStart: startDrag, onPanUpdate: onDrag, onPanEnd: endDrag, child: CustomPaint( // canvas on which to draw during the paint phase painter: BoxPainter( boxPosition: boxPosition, boxPositionOnStart: boxPositionOnStart ?? boxPosition, touchPoint: point, ), child: Container(), ), ); }
11. Poznan Flutter Developer Group Physics-based animations 11 void onDrag(DragUpdateDetails details) { setState(() { point = (context.findRenderObject() as RenderBox) .globalToLocal(details.globalPosition); final dragVec = start.dy - point.dy; final normDragVec = (dragVec / context.size.height).clamp(- 1.0, 1.0); boxPosition = (boxPositionOnStart + normDragVec).clamp( 0.0, 1.0); }); }
12. Poznan Flutter Developer Group Physics-based animations - RenderBox, RenderObject - onPanStart(), onPanUpdate(), onPanEnd() which correspond to startDrag(), onDrag(), endDrag() [GestureDetector] - context.findRenderObject() as RenderBox - DragUpdateDetails, DragStartDetails etc. - 12
13. Poznan Flutter Developer Group Physics library 13 /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart' ; export 'src/physics/friction_simulation.dart' ; export 'src/physics/gravity_simulation.dart' ; export 'src/physics/simulation.dart' ; export 'src/physics/spring_simulation.dart' ; export 'src/physics/tolerance.dart' ; export 'src/physics/utils.dart' ;
14. Poznan Flutter Developer Group 14 No animation object
15. Poznan Flutter Developer Group 15 Out of the box animations Stack(children: <Widget>[ new Center( child: new Container( decoration: new BoxDecoration( color: Colors.purple, ), child: new FlutterLogo( size: _boxSize, )), ) ] var _boxSize = 200.0; void _startAnimation() { setState(() { _boxSize *= 1.3; }); } void _resetAnimState() { setState(() { _boxSize = 200; }); }
16. Poznan Flutter Developer Group 16 Out of the box animations Simply calling: setState( () { … });
17. Poznan Flutter Developer Group Handy animation widgets 17
18. Poznan Flutter Developer Group 18 AnimatedContainer AnimatedContainer( duration: Duration(milliseconds: 2000), curve: Curves.bounceOut, width: _boxSize, height: _boxSize, decoration: BoxDecoration( color: Colors.purple, ), child: FlutterLogo(), ), var _boxSize = 120.0; void _startAnimation() { setState(() { _boxSize *= 1.7; }); } void _resetAnimState() { setState(() { _boxSize = 120.0; }); }
19. Poznan Flutter Developer Group 19 AnimatedContainer Main properties of AnimatedContainer widget: - curve [ function over time / how the animation behaves] - duration [animation duration]
20. Poznan Flutter Developer Group 20 AnimatedContainer Properties [of AnimatedContainer] that are null are not animated. Its child and descendants are not animated.
21. Poznan Flutter Developer Group 21 AnimatedContainer We can also animate more properties automatically, like: • aligment • padding • color • foregroundDecoration • constraints [BoxConstraints] • margin • transform [Matrix4]; transformation matrix to apply before painting the container
22. Poznan Flutter Developer Group 22 AnimatedCrossFade var _rainbowdashImgUrl = 'assets/images/rainbowdash.png' ; var _dashImgUrl = 'assets/images/dash.png' ; AnimatedCrossFade( duration: Duration(milliseconds: 300), crossFadeState: _animationStarted, firstChild: Image.asset(_dashImgUrl), secondChild: Image.asset(_rainbowdashImgUrl), ) CrossFadeState _animationStarted = CrossFadeState.showFirst; void _startAnimation() => setState(() { _animationStarted = CrossFadeState.showSecond; }); void _resetAnimState() => setState(() { _animationStarted = CrossFadeState.showFirst; });
23. Poznan Flutter Developer Group 23 AnimatedCrossFade Main properties: duration - animation length crossFadeState - triggers the animation [ enum showFirst, showSecond; ]
24. Poznan Flutter Developer Group 24 Hero animation var _dashImgUrl = 'assets/images/dash_s.png' ; ListView.builder( [...] itemBuilder: (context, position) { [...] Hero( tag: "hero_anim_example_tag" + position.toString(), child: Container( width: 70, child: Image.asset(_dashImgUrl), ), ), ) Hero( tag: "hero_anim_example_tag" + widget.position, child: Container( width: double.infinity, child: Image.asset(_dashImgUrl), ), ),
25. Poznan Flutter Developer Group 25 Hero animation Main properties: tag - identifies specific widget which needs to be animated across consequent screens Tag has to be unique in a widget tree!
26. Poznan Flutter Developer Group 26 Fluttershy / Rainbow Dash
27. Poznan Flutter Developer Group 27 Flare overview - Flare is built by 2dimenions.com - Free for open-source designs
28. Poznan Flutter Developer Group 28 Flare catalogue
29. Poznan Flutter Developer Group 29 Flare - edit mode
30. Poznan Flutter Developer Group 30 Flare - edit mode - easily import *.svg files - edit layers, objects, paths - define animations & states - infinite loop animations - basic concepts: - stage - nodes - bones - animations (design & animate mode)
31. Poznan Flutter Developer Group 31 Simple Flare animation import 'package:flare_flutter/flare_actor.dart' ; var _animationName = ""; bool _isPaused = true; FlareActor( "assets/anim/success_check.flr" , animation: _animationName, isPaused: _isPaused, ), void _startAnimation() => setState(() { _animationName = "Untitled"; _isPaused = false; }); void _resetAnimState() => setState(() { _animationName = ""; _isPaused = true; });
32. Poznan Flutter Developer Group 32 FlareActor Main properties: filename - *.flr file location [String] [e.g. ‘assets/anim/example.flr’] animation - initial animation [String][Optional] defined inside Flare isPaused - animation state [Boolean]
33. Poznan Flutter Developer Group 33 Flare 2d transformations
34. Poznan Flutter Developer Group 34 Simple Nima animation import 'package:nima/nima_actor.dart'; var _animationName = "idle"; NimaActor("assets/anim/robot.nma", alignment: Alignment.center, animation: _animationName), ) // 'attack' , 'jump', 'idle' void _startAnimation() => setState(() { _animationName = "attack"; }); void _resetAnimState() => setState(() { _animationName = "idle"; }); void _jumpAnimState() => setState(() { _animationName = "jump"; });
35. Poznan Flutter Developer Group 35 NimaActor Main properties: filename - *.nma file location [String] [e.g. ‘assets/anim/example.nma’] animation - initial animation [String][Optional] defined inside Nima
36. Poznan Flutter Developer Group 36 Expressive animations - login experience
37. Poznan Flutter Developer Group 37 Expressive animations
38. Poznan Flutter Developer Group 38 Source code https://github.com/kosiara/flutter-simple-animations
39. Poznan Flutter Developer Group References https://medium.com/flutterpub/widgetoftheweek-animatedcont ainer-widget-3ebae930ebba https://docs.2dimensions.com/support/tutorials https://medium.com/2dimensions/building-an-interactive-login -screen-with-flare-flutter-749db628bb51 https://docs.2dimensions.com/support/flare/core-concepts https://medium.com/flutter-io/perspective-on-flutter-6f832f4d9 12e https://medium.com/flutter-community/make-3d-flip-animation -in-flutter-16c006bb3798 https://proandroiddev.com/animations-in-flutter-6e02ee91a0b 2 39 https://flutter.dev/docs/development/ui/animations https://www.youtube.com/watch?v=LHZ0KSvTTqQ https://proandroiddev.com/getting-your-hands-dirty-with-flutter -basic-animations-6b9f21fa7d17
40. Poznan Flutter Developer Group Summary Bartosz Kosarzycki Rafał Ślósarz Poznań Flutter Developer Group facebook.com/poznanflutter 40 @bkosarzycki