Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Animation avec Flutter
Search
Agnaramon Boris-Carnot
August 23, 2020
Programming
0
100
Animation avec Flutter
Session organisée au sein de notre communauté locale Dart & Flutter
Agnaramon Boris-Carnot
August 23, 2020
Tweet
Share
More Decks by Agnaramon Boris-Carnot
See All by Agnaramon Boris-Carnot
Créer des vues personnalisées avec Flutter
agnaramonboris
0
190
Notre première interface graphique avec Flutter
agnaramonboris
2
440
Introduction à Dart & Flutter : par où commencer ?
agnaramonboris
2
220
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
130
WindowInsetsだってテストしたい
ryunen344
1
230
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
700
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Unsuck your backbone
ammeep
671
58k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Music & Morning Musume
bryan
46
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Invisible Side of Design
smashingmag
301
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bash Introduction
62gerente
614
210k
Faster Mobile Websites
deanohume
307
31k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Transcript
Animation avec Flutter @improvissus @agnamc9
Animation avec Flutter
Animation avec Flutter Implicit Animation Explicit Animation
Animation avec Flutter Implicit Animation Explicit Animation
Animation avec Flutter Implicit Animation https://flutter.dev/docs/codelabs/implicit-animations
Implicit Animation Implicit Animation : Built-In • Nomenclature : Animated(Foo)
Implicit Animation : Built-In Animated(Foo) • Animated(Container) • Animated(Opacity) •
Animated(Positioned) • ...
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.
Implicit Animation : Built-In AnimatedContainer( width: isBigger ? 300 :
100, height: isBigger ? 300 : 100, color: Colors.blue, duration: Duration(seconds: 1), ),
Implicit Animation : Built-In Curve Examples https://api.flutter.dev/flutter/animation/Curves-class.html
Implicit Animation
Implicit Animation Animated(Foo) ???
Implicit Animation Animated(Foo) ???
Implicit Animation : Custom TweenAnimationBuilder - duration: Durée - tween:
Intervalle de valeur - builder: Appelé à chaque mise à jour de l’animation - curve (option)
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() ); }, )
Animation avec Flutter
Animation avec Flutter
Animation avec Flutter Implicit Animation [Limites] • Unidirectionnel • Aucun
contrôle
Animation avec Flutter Implicit Animation Explicit Animation
Animation avec Flutter Explicit Animation https://flutter.dev/docs/codelabs/explicit-animations
Explicit Animation Explicit Animation : Built-In • Nomenclature : (Foo)Transition
Explicit Animation : Built-In (Foo)Transition • (Align)Transition • (Rotation)Transition •
(Positioned)Transition • ...
Explicit Animation : Built-In RotationTransition( child: FlutterLogo( size: 60, ),
)
Explicit Animation : Built-In RotationTransition( child: FlutterLogo( size: 60, ),
turns: // ???????, )
Explicit Animation : Built-In AnimationController https://api.flutter.dev/flutter/animation/AnimationController-class.html
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 )
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(); } }, ) ], )
Explicit Animation (Foo)Transition ???
Explicit Animation (Foo)Transition ???
Explicit Animation : Custom AnimatedBuilder
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), ), ), ); }, )
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
Merci @improvissus @agnamc9