Googeld rive

Rive UnityA Unity runtime library for Rive. This is currently a technical preview for Mac and Windows installs of Unity. We're hoping to gather feedback about the API and feature-set as we expand platform support.Rendering supportCurrently supported platforms and backends include:WebGLMetal on MacMetal on iOSD3D11 on WindowsOpenGL on WindowsOpenGL on AndroidPlanned support for:D3D12VulkanFeature supportThe rive-unity runtime uses the latest Rive C++ runtime.FeatureSupportedAnimation Playback✅Fit and Alignment✅Listeners✅Setting State Machine Inputs✅Listening to Events✅Updating text at runtime✅Out-of-band assets✅Procedural rendering✅PNG images✅WEBP and JPEG images✅Table of contents⭐️ Rive Overview🚀 Getting Started👨‍💻 Contributing❓ IssuesRive overviewRive is a real-time interactive design and animation tool that helps teamscreate and run interactive animations anywhere. Designers and developers use our collaborativeeditor to create motion graphics that respond to different states and user inputs. Our lightweightopen-source runtime libraries allow them to load their animations into apps, games, and websites.🏡 Homepage📘 General help docs · Rive Unity docs🛠 Learning RiveGetting startedSee the official examples repository to easily run a project locally: the Rive Unity docs for more information.You will need a Unity editor that supports OpenGL or D3D11 for Windows, or a Mac with ARM64 (M1, M2, etc) architecture and OS 11.0 or later.Select either D3D11/OpenGL for Windows, or Metal for Mac/iOS as the Graphics API under Project Settings -> Player in Unity.You can install the Rive package for Unity by opening the Package Manager (Window -> Package Manager) and adding the latest release as a git dependency, for example (replace 0.0.0 with the latest release):[email protected]:rive-app/rive-unity.git?path=package#v0.0.0Or through HTTP (replace 0.0.0 with the latest release): can also add it manually to your projects Packages/manifest.json file (replace 0.0.0 with the latest release):{ "dependencies": { "app.rive.rive-unity": "[email protected]:rive-app/rive-unity.git?path=package#v0.0.0" }}Awesome RiveFor even more examples and resources on using Rive at runtime or in other tools, checkout the awesome-rive repo.ContributingWe love contributions! Check out our contributing docs to get

Rive React NativeA React Native runtime library for Rive.This library is a wrapper around the iOS/Android runtime, providing a component and ref pattern for React Native applications.Table of contents⭐ Rive Overview🚀 Getting Started & API docs🔍 Supported Devices📚 Examples🏃 Migration Guides👨‍💻 Contributing❓ IssuesRive OverviewRive is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.🏡 Homepage📘 General help docs🛠 Resources for building in RiveGetting StartedFollow along with the link below for a quick start in getting Rive React Native integrated into your multi-platform applications.Getting Started with Rive in React NativeAPI documentationSupported DevicesBecause this runtime library has a dependency on the Rive Android and Rive iOS runtimes, the supported devices align with each of these dependencies minimum supported devices, as well as the minimum device requirements of the React Native framework.iOS: 14.0+Android:Minimum SDK version: 21Target SDK version: 33ExamplesCheck out the example/ folder to run an example application using the Rive React Native runtime. It runs on the local build of this library, and showcases a number of ways to use the Rive component and useRef hook pattern:Setting a Rive file via a URL, or asset in the Android/iOS projectsDisplaying single or multiple animations / artboards on one componentSetting up and maniuplating a state machine via inputs...and more!Steps:Run yarn bootstrapcd exampleyarn expo run:android or yarn expo run:iosiOS:You may need to run pod install (first time) or pod update RiveRuntime (updates to the underlying Rive iOS runtime) in the example/iOS folder to get the runtime installed or updatedMigration GuidesUsing an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through version bumps; breaking changes and all!Migration guidesContributingWe love contributions! Check out our contributing docs to get more details into how to run this project, the examples, and more all locally.IssuesHave an issue with using the runtime, or want to suggest a feature/API to help make your development life better? Log an issue in our issues tab! You can also browse older issues and discussion threads there to see solutions that may have worked for common problems.

作者：京东物流 沈明亮在App开发过程中，如果想实现动画效果，可以粗略分为两种方式。一种是直接用代码编写，像平移、旋转等简单的动画效果，都可以这么干，如果稍微复杂点，就会对开发工程师的数学功底、图形图像学功底有很高的要求。另一种方式，可以让UI同学配合，一次性出多张图片或者直接出一张GIF图，通过短时间内快速轮播图片的方式来实现复杂动画效果，这种方式真正实现起来还是有挺多问题的，比如缺少对动画过程的控制、图片尺寸的适配等等。那么，有没有更好的解决方案呢？有的，Rive。简介Rive是专门为简化动画的实现而生的，设计师可以在其官网通过拖拉拽实现各种复杂动画效果，设计完毕后导出动画文件，工程师可以在App里直接导入此文件，配合相应的SDK即可实现。其官网有详细的开发文档，同时也有自己的社区资源，我们可以直接从社区里下载别人设计好的动画效果进行学习。另外特别重要的是，Rive支持跨平台，同时支持Android、iOS、Flutter、JS、React、C++等等，本文以Flutter的实现为例介绍。一个完整的例子登陆Rive官网进行设计，并导出相应的动画文件，Rive的动画文件是以.riv结尾。本文示例是从官网的社区里找的一个个人比较喜欢的动效。依次运行下面的命令，引入rive sdk。将导出的.riv文件放到资源目录下，并修改pubspec.yaml文件。加载动画文件并展示的核心代码：核心代码就这么多，对于代码中的标注详细说明下：标注1的地方，主要作用是获取状态机控制器，fromArtboard 方法有两个参数，第二个参数是状态机的名称，这个名称需要和UI同学协商好，一旦确定好名称就不允许设计同学再改了，对应于设计面板界面的左下角，如下图：标注2的地方，本例的动画是根据“数值”的变化而变化的，findInput的入参同样需要和UI同学协商好，一旦设计时把这个名字改了，代码里也别忘了进行相应的修改，也在设计面板的左下角，在状态机名称的右边，如下图：完整的代码如下，大家可以按步骤自己操作体验下。class RiveDemo extends StatefulWidget { const RiveDemo({Key? key}) : super(key: key); @override State createState() => _RiveDemoState();}class _RiveDemoState extends State { /// 状态机控制器 StateMachineController? controller; /// 控制输入数值 SMIInput? valueController; ///画板，配合Rive widget 使用，展示动画效果。 Artboard? riveArtboard; Timer? timer; @override void initState() { super.initState(); //加载 rootBundle.load('asset/rives/rive_demo.riv').then((value) async { final file = RiveFile.import(value); final artboard = file.mainArtboard; //1 controller = StateMachineController.fromArtboard(artboard, 'TreeMachine'); if (controller != null) { setState(() { artboard.addController(controller!); //2 valueController = controller!.findInput('input'); valueController!.value = -4; }); } riveArtboard = artboard; }); } @override void dispose() { controller?.dispose(); stopAnimation(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Rive Demo'), ), backgroundColor: Colors.white, body: Center( child: riveArtboard == null ? const CircularProgressIndicator() : Rive(artboard: riveArtboard!), ), floatingActionButton: SizedBox( height: 50, child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () { startAnimation(); }, child: const Text('start'), ), TextButton( onPressed: () { stopAnimation(); }, child: const Text('stop'), ), TextButton( onPressed: () { resetAnimation(); }, child: const Text('reset'), ), ], ), ), ); } /// 开始动画 void startAnimation() { if (timer != null) { return; } timer = Timer.periodic(const Duration(milliseconds: 60), (timer) { valueController?.value += 0.5; }); } /// 停止动画 void stopAnimation() { timer?.cancel(); timer = null; } /// 重置动画 void resetAnimation() { stopAnimation(); valueController?.value = 0; }}总结像本例中的动画效果，如果用代码来编写，时间成本会很大很大，如果靠图片的堆积，实现起来也很麻烦，而且由于图片的数量增多，安装包的体积也会增加很多。但是用rive，实现起来却很方便，可能唯一的成本就是设计师同学的学习成本。Rive不仅支持本地动画文件的加载，还可以将动画文件放到服务器上，利用RiveAnimation.network方法进行加载。更多的使用示例可以参考：