5 Hamber Mastering Rive Vector Animation In Flutter.pdf

《5 Hamber Mastering Rive Vector Animation In Flutter.pdf》由會員分享，可在線閱讀，更多相關《5 Hamber Mastering Rive Vector Animation In Flutter.pdf（29頁珍藏版）》請在三個皮匠報告上搜索。

1、Mastering RiveVector AnimationIn FlutterShanghaiIntroduction&BackgroundUnderstanding the Importance of AnimationsWhat exactly are we discussing when we talk about animations in applications?Role of AnimationsRole of AnimationsUser ExperienceUser ExperienceEmotional ConnectionEmotional ConnectionImpo

2、rtance of Animation Software1980s1990s2000s2010s2020EvolutionEvolutionBeginnings of AnimationBeginnings of AnimationEnhanced Web FormatsEnhanced Web FormatsRise of 3D AnimationRise of 3D AnimationPresent&FuturePresent&FutureInteractive&Interactive&Web IntegratedWeb IntegratedAutodesk AnimatorAutodes

3、k AnimatorAdobe After EffectsAdobe After EffectsLottie&RiveLottie&RiveAdobe FlashAdobe FlashSoftwareSoftwareAnimation TimelineReasons to Choose Rive1.1.Animation Control and CustomizationAnimation Control and Customization2.2.Interactivity and Dynamic EffectsInteractivity and Dynamic Effects3.3.Foun

4、der of Lottie joined RiveFounder of Lottie joined RiveSynergy between Rive and Flutter1.1.Integration with Flutters Optimized Rendering Integration with Flutters Optimized Rendering EngineEngine2.2.Use of Vector GraphicsUse of Vector Graphics3.3.Efficient Encoding of Animation DataEfficient Encoding

5、 of Animation Data4.4.Declarative Programming ModelDeclarative Programming Model5.5.Custom Animation ControllersCustom Animation ControllersCore Features of Rive(Editor)Core Features of Rive1.1.Basic Drawing ToolsBasic Drawing Tools2.2.Creating AnimationsCreating Animations3.3.Text AnimationText Ani

6、mation4.4.Rigging(Bone Animation)Rigging(Bone Animation)5.5.State MachinesState MachinesArtboardsPen toolProcedual shapesFills and StrokesShapes and PathsHierarchyOrigin and FreezeClippingTimelineKeysMotion PathInterpolation panelSolosQuantizeText RunsText MofifiersBonesIK ConstraintInputsUse CaseUs

7、e CasePendulumBouncingBallFlameSolosText PendulumMoon3DTextWaveAnimationMore Use CasesIntegration of Rive in Flutter(Runtime)Installdependenciesdependencies:riverive:0.12.1:0.12.1flutter_genflutter_gen:integrationsintegrations:riverive:true:trueBuild Widgetoverrideoverride Widget build(BuildContext

8、context)Widget build(BuildContext context)return return RiveGenImageRiveGenImage(bundleKey(package:widget.package?,path:widget.path),bundleKey(package:widget.package?,path:widget.path),).rive().rive(artboard:widget.artboard,artboard:widget.artboard,onInit:_onInit,onInit:_onInit,),),););After Initvoi

9、d void _onInit(Artboard art)_onInit(Artboard art)final final ctrl=ctrl=StateMachineControllerStateMachineController.fromArtboard(.fromArtboard(art,art,widget.artboard,widget.artboard,)!;)!;ctrl.isActive=true;ctrl.isActive=true;art.addController(ctrl);art.addController(ctrl);setState()_controller=ctr

10、l;);setState()_controller=ctrl;);Trigger Inputsvoid void _triggerInputs(bool isSelected)_triggerInputs(bool isSelected)final final input=_controller?.input=_controller?.findInputfindInput(widget.input);(widget.input);input?.change(isSelected);input?.change(isSelected);Deconstructing the Source Code,

11、Stripping Down to the Essencerive_common1.1.glyph_lookup.dartglyph_lookup.dart2.2.math:aabb.dart/mat2d.dart/vec2d.dart math:aabb.dart/mat2d.dart/vec2d.dart 3.3.binary_buffer:binary_reader.dart/binary_writer.dartbinary_buffer:binary_reader.dart/binary_writer.dart4.4.rive_text_ffi.dart/rive_text_wasm.

12、dartrive_text_ffi.dart/rive_text_wasm.dart5.5.dependency_sorter.dartdependency_sorter.dartriveRiveRenderBoxRiveRenderBoxperformLayout()performLayout()paint()paint()Parse into Rive ArtboardMatrix Vector ProcessRiveRenderBoxRiveAnimationRive Render StepLoad BinaryBest Practices and TipsDeep Understanding of the Essence of AnimationHigher ROI when Implementing Complex Animations with RiveIntegrating Animations with App LogicThe Advantages of Interactive AnimationsIgnite Creativity,Empower Apps Rive and Flutter,Shaping the Future of Interactive Experiences.Q/A