Introduction to Rive animations for Flutter

In general, interaction designers an developers have tough times being on the same page trying to implement the perfect and seamless animations and interactions in their mobile apps. Complex interactions have always been difficult to translate to code while simpler motion designs rarely make a difference.

Enter Rive, a vector-based animation tool for apps and games, where objects can be manipulated with tools like constraints, bones, deformations, and more.

Rive was formerly called Flare, made by 2Dimensions. At present product and the company are both called Rive.

What makes Rive such a powerful animation tool for designers ?

It's fully Online, Collaborative, allows you to design, animate, and create all your work within this single tool.

Basically for designers, Rive has the capabilities to

• Import PSDs to preserve layers
• Drag and drop SVGs to import vector graphics from illustrator or Sketch or even XD
• Draw vector shapes directly in the application

But, The best part is the importer built recently which allows importing of After effects files directly and edit them real time.

And there is more, Rive comes power packed with more complex features that have been made easy

Inverse Kinematics is one, which allows to work with bones in our characters, a more natural way to animate characters and other objects

The above animation was created by just animating one root bone, Rive can create complex poses and animations without having to manipulate a lot of bones individually.

Moreover, additionally like Unity and Blender, the animations and visual elements are autonomous of the realistic parts they control, this implies you can make an animation once and reuse it again and again.

Another super cool feature of Rive is that we can mix animations. We can smoothly blend from one animation to another and even layer animations on top of one another.

To explain this from a mobile app's perspective, Take an example of an animation that occurs after a swipe action by the user, We can blend the properties of the animating elements according to how fast or far the user's finger has traveled and we can keep adding animations on top of this as well.

Why Rive and flutter are made for each other?

Rive allows you to download your animations as a binary file [.flr file] and add it to your Flutter Project directory, you need to update the “pubspec.yaml” file to include the packages for Rive and no rebuilding is needed in code.

Moreover, The Rive Runtime give you full control of your files in other tools and game engines.

Overall Rive is a Motion design tool built with features of After Effects and more tailored towards application and Game development but without the unnecessary bits.

Rive is only going to get bigger in the days to come. Similar to the shift there was for UI design from Photoshop to XD and Figma, we may see a day where interaction and game animations are fully made on Rive.

Then why you are waiting still? Get started with Rive and create your first project. Explore our works and do post your comments.