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
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
VS Code Update for GitHub Copilot
74th
2
620
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
120
5つのアンチパターンから学ぶLT設計
narihara
1
160
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
3
500
Discover Metal 4
rei315
2
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
650
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Become a Pro
speakerdeck
PRO
28
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
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