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
Creating Flutter Animations with Rive
Search
Kenichi Kambara
July 10, 2020
Technology
0
170
Creating Flutter Animations with Rive
potatotips 70での発表資料です。
「Creating Flutter Animations with Rive」
#potatotips
Kenichi Kambara
July 10, 2020
Tweet
Share
More Decks by Kenichi Kambara
See All by Kenichi Kambara
[YUMEMI.grow Mobile #12]UX Improvements on Flutter Apps Part 2
korodroid
0
21
[potatotips #86]UX Improvements on Flutter Apps Part 1
korodroid
0
32
Supporting RTL on Flutter Apps 7 Development Tips
korodroid
0
35
[DevFestKC]Go Global with Flutter Apps 101
korodroid
0
38
[ABC2023A]Go Global with Flutter Apps
korodroid
0
26
[potatotips #85]Deep Dive into RTL on Flutter Apps (Short ver.)
korodroid
0
40
Supporting RTL on Flutter Apps
korodroid
0
38
[potatotips #84]Supporting Large Screen on Flutter
korodroid
0
82
7 Tips for Wear OS Apps Development
korodroid
0
40
Other Decks in Technology
See All in Technology
社内勉強会運営のコツ
senoo
6
1.1k
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
190
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
700
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
160
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
反実仮想機械学習とは何か
usaito
PRO
7
2.2k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Visualization
eitanlees
135
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
A better future with KSS
kneath
231
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Bash Introduction
62gerente
604
210k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Designing Experiences People Love
moore
136
23k
Transcript
2020.07.10 Kenichi Kambara (@korodroid) Creating Flutter Animations with Rive potatotips
#70
About me •Mobile App Development •Technical Speeches •Technical Writings •[Official]
Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
•Creating Flutter Animations •Rive Introduction
Creating Animations Implementing with Dart Using an Animation Tool
Implementing with Dart •Implicit Widget •No need AnimationController •Customization:
Moderate •Transition Widget •Requires AnimationController •Customization: Middle •Explicit Widget •Requires AnimationController •Customization: High Implicit Widget Transition Widget
Code Sample (Implicit Widget) body: Center( child: AnimatedOpacity( opacity:
_visible ? 1.0 : 0.0, duration: Duration(milliseconds: 2000), child: Image.asset('images/chara.png')), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { _visible = !_visible; }); }, tooltip: ‘Switch Opacity', child: Icon(Icons.flip), ),
Using an Animation Tool Rive: Adding high-quality animation easily
(Former name: Flare)
-JWF%FNP Creating Simple Animation with Rive
Rive #JOBSZ
Adding the package into Flutter Project dependencies: flutter: sdk:
flutter ## Flare flare_flutter: pubspec.yaml Rive
Importing Flare data (*.flr) and Coding return Scaffold( appBar:
AppBar( title: Text(widget.title), ), body: Center( child: FlareActor( "assets/sample.flr", animation: "sample01", fit: BoxFit.contain, )), ); } main.dart Rive w'JMFOBNF wBOJNBUJPOOBNF
Creating Morphing with Rive -JWF%FNP
•Free: File Properties must be public (View-only[by default] or
fork-OK) •Paid: File Properties can be private - 21$/month on Monthly Plan - 14$/month on Yearly Plan [Rive]Price
Conclusion •Ξχϝʔγϣϯͷ࣮ݱํࣜ͞·͟· •Γ͍ͨ͜ͱ(+ίετ؍)ʹ߹Θͤͨํࣜબ͕ॏཁ •Riveબࢶͷ1ͭ
•Rive https://rive.app/ •flare_flutter https://pub.dev/packages/flare_flutter Reference
Please let me know if you have any requests such
as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much