Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Animations in Flutter

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

3d83f31339d239abcc55f869e5f30348?s=128

bkosarzycki

April 11, 2019
Tweet

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