Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Flutter Animations with Rive

Creating Flutter Animations with Rive

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


Kenichi Kambara

July 10, 2020


  1. 2020.07.10 Kenichi Kambara (@korodroid) Creating Flutter Animations with Rive potatotips

  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'JMFOBNF wBOJNBUJPOOBNF
  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