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
PipeCDのプラグイン化で目指すところ
warashi
1
250
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
VS Code Update for GitHub Copilot
74th
2
590
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
エンジニア向け採用ピッチ資料
inusan
0
180
ニーリーにおけるプロダクトエンジニア
nealle
0
730
Deep Dive into ~/.claude/projects
hiragram
11
2.3k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
Porting a visionOS App to Android XR
akkeylab
0
190
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
2k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
It's Worth the Effort
3n
185
28k
Facilitating Awesome Meetings
lara
54
6.4k
Into the Great Unknown - MozCon
thekraken
39
1.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
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