Creating Flutter Animations with Rive

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