<aside> <img src="/icons/exclamation-mark_gray.svg" alt="/icons/exclamation-mark_gray.svg" width="40px" /> For a bit of context, you can read this previous article comparing Rive and Lottie for vectoral animations: Rive or Lottie: Which One For My Vectoral Animations
</aside>
I am not particularly familiar with video game development programs. Rive includes some tools that are quite similar to those found in Unreal Engine, so I will need to understand them at least to some extent. However, I am well-versed in acceleration curves, keyframes, and animation principles thanks to my experience with After Effects and Premiere. I have seen many animations created with Rive shared on social media, but rarely fully integrated into a web project or an app. How do we integrate Rive, and what is the experience like from both the motion designer's and the developer's point of view?
Rive - Build interactive motion graphics that run anywhere
Real learning occurs through practice or teaching. So, let's build something and experience Rive from both a designer's and a developer's point of view. I had an idea that complements another pet project of mine, a simple image converter. The Rive state machine will be used to display an animation showing the current state of the tunnel, transitioning smoothly as the user progresses through the process.
The project is a superficial exploration of Rive's features and technological potential, involving the Rive app and the integration of the project in a runtime environnement. It is primarily artistic and educational.
The Dropbox inviting the user to drop a file.
The Dropbox inviting the user to drop a file.
Briefly, to focus on the real subject of the article, the converter is composed like follow:
A simplified vision of the conversion workflow.
Now that we have a working image converter, let’s make it look fancy. As I described previously, displaying Rive animations will come with a price. The .riv files will need a renderer that will either be served from an external CDN or provided by yourself (which is faster). I went for the first option in this case.
