Animation avec Flutter

Session organisée au sein de notre communauté locale Dart & Flutter

Transcript

1. Animation avec Flutter @improvissus @agnamc9
2. Animation avec Flutter
3. Animation avec Flutter Implicit Animation Explicit Animation
4. Animation avec Flutter Implicit Animation Explicit Animation
5. Animation avec Flutter Implicit Animation https://flutter.dev/docs/codelabs/implicit-animations
6. Implicit Animation Implicit Animation : Built-In • Nomenclature : Animated(Foo)
7. Implicit Animation : Built-In Animated(Foo) • Animated(Container) • Animated(Opacity) • Animated(Positioned) • ...
8. Implicit Animation : Built-In Animated(Foo) - duration: Durée de l’animation - curve (option): Taux de change de l’animation : accéléré, décéléré, etc.
9. Implicit Animation : Built-In AnimatedContainer( width: isBigger ? 300 : 100, height: isBigger ? 300 : 100, color: Colors.blue, duration: Duration(seconds: 1), ),
10. Implicit Animation : Built-In Curve Examples https://api.flutter.dev/flutter/animation/Curves-class.html
11. Implicit Animation
12. Implicit Animation Animated(Foo) ???
13. Implicit Animation Animated(Foo) ???
14. Implicit Animation : Custom TweenAnimationBuilder - duration: Durée - tween: Intervalle de valeur - builder: Appelé à chaque mise à jour de l’animation - curve (option)
15. Implicit Animation : Custom TweenAnimationBuilder( duration: Duration(seconds: 1), tween: Tween<double>(begin: 0.0, end: 2 * math.pi), builder: (context, value, child) { return Transform.rotate( angle: value, child: FlutterLogo() ); }, )
16. Animation avec Flutter
17. Animation avec Flutter
18. Animation avec Flutter Implicit Animation [Limites] • Unidirectionnel • Aucun contrôle
19. Animation avec Flutter Implicit Animation Explicit Animation
20. Animation avec Flutter Explicit Animation https://flutter.dev/docs/codelabs/explicit-animations
21. Explicit Animation Explicit Animation : Built-In • Nomenclature : (Foo)Transition
22. Explicit Animation : Built-In (Foo)Transition • (Align)Transition • (Rotation)Transition • (Positioned)Transition • ...
23. Explicit Animation : Built-In RotationTransition( child: FlutterLogo( size: 60, ), )
24. Explicit Animation : Built-In RotationTransition( child: FlutterLogo( size: 60, ), turns: // ???????, )
25. Explicit Animation : Built-In AnimationController https://api.flutter.dev/flutter/animation/AnimationController-class.html
26. Explicit Animation : Built-In class _AnimationTestState extends State<AnimationTest> with SingleTickerProviderStateMixin { AnimationController _animationController; @override void initState() { super.initState(); _animationController = AnimationController(duration: Duration(seconds: 2), vsync: this) ..repeat(); } @override void dispose() { _animationController.dispose(); super.dispose(); } RotationTransition( child: FlutterLogo( size: 60, ), turns: _animationController )
27. Explicit Animation : Built-In Column( children: [ RotationTransition( child: FlutterLogo( size: 60, ), turns: _animationController, ), MaterialButton( child: Text('Click'), onPressed: () { if (_animationController.isAnimating) { _animationController.stop(); } else { _animationController.repeat(); } }, ) ], )
28. Explicit Animation (Foo)Transition ???
29. Explicit Animation (Foo)Transition ???
30. Explicit Animation : Custom AnimatedBuilder
31. Explicit Animation : Custom AnimatedBuilder( animation: _animationController, builder: (context, child) { return Transform.rotate( angle: _animationController.value * 2 * math.pi, child: Container( alignment: Alignment.center, width: 200, height: 200, color: Colors.blue, child: Text( 'Spin !’, style: TextStyle(fontSize: 20), ), ), ); }, )
32. En savoir plus Overview https://flutter.dev/docs/development/ui/animations Hero Animation https://flutter.dev/docs/development/ui/animations/hero-animations Staggered Animation https://flutter.dev/docs/development/ui/animations/staggered-animations Implementing Complex UI with Flutter - Marcin Szałek https://www.youtube.com/watch?v=FCyoHclCqc8 Flutter Animation Sample https://flutter.github.io/samples/animations.html
33. Merci @improvissus @agnamc9