Creating Flutter Animations with Rive

potatotips 70での発表資料です。
「Creating Flutter Animations with Rive」
#potatotips

Transcript

1. 2020.07.10 Kenichi Kambara (@korodroid) Creating Flutter Animations with Rive potatotips #70
2. About me •Mobile App Development •Technical Speeches •Technical Writings •[Official] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid) 
3. •Creating Flutter Animations •Rive Introduction
4. Creating Animations Implementing with Dart Using an Animation Tool 
5. 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
6. 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), ),
7. Using an Animation Tool  Rive: Adding high-quality animation easily (Former name: Flare)
8.  -JWF
   %FNP
    Creating Simple Animation with Rive
9. Rive  #JOBSZ
10.  Adding the package into Flutter Project dependencies: flutter: sdk: flutter ## Flare flare_flutter: pubspec.yaml Rive
11.  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'JMF
    OBNF
    wBOJNBUJPO
    OBNF
12. Creating Morphing with Rive  -JWF
    %FNP
    
13.  •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
14. Conclusion •Ξχϝʔγϣϯͷ࣮ݱํࣜ͸͞·͟· •΍Γ͍ͨ͜ͱ(+ίετ؍఺΋)ʹ߹Θͤͨํࣜબ୒͕ॏཁ •Rive΋બ୒ࢶͷ1ͭ 
15. •Rive https://rive.app/ •flare_flutter https://pub.dev/packages/flare_flutter Reference 
16. 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