arrowup_inline

basysKom AnwendungsEntwicklung

Introducing the RiveQtQuickPlugin – Powerful Animations For Your QtQuick Applications
  • QML, Qt, Rive
Essential Summary
Rive is a popular tool for vector animations. While the editor itself is a closed source commercial product, there are FOSS implementations for the player runtime. basysKom has developed a QtQuick integration based on the rive-cpp library. This article introduces the project and its current state.

Motivation

Modern UIs tend to use small animations to guide and engage their users. Designers should be able to create and tweak this kind of animations without having to rely on software developers. Lottie is an established format for this kind of animations. Qt itself has native built-in support since 5.13. In addition there is also the lottie-qml project.

So why did we bother creating the RiveQtQuickPlugin?

Lottie has a few downsides.

  • Lottie files tend to be quite large both on storage as well as in memory when run. This is an issue especially on embedded devices.
  • Lottie is non-interactive. It is not possible to create interactive animations without involving a software developer.

RiveQtQuickPlugin: A Quick Overview

While the RiveQtQuickPlugin is currently still work in progress, it already provides the following features that enhance the functionality of your QtQuick/QML applications.

  • Rive and Qt Quick Integration:
    Import and manipulate Rive animations in your QtQuick/QML application, using simple QML types.
  • Dynamic Interaction:
    Create a lively user interface by responding to user interactions with the help of Rive animations. Rive animations can react on mouse hover or touch events directly, no need to for the developer to implement anything.
  • Multi-Platform-Multi-Qt:
    Qt5.15.2+ with Software and Hardware Rendering
    Qt6.5 with Software and Hardware Rendering

Getting Started

You can access RiveQtQuickPlugin on our GitHub repository here.

We have put together a detailed README to guide you through the setup, use and customization of the plugin.

Don’t forget to check out the examples demonstrating Rive animations within a QtQuick/QML context. These examples cover a wide range of use cases, from simple animations to complex interactions, which can serve as an excellent starting point for your projects.

The State of Development

The Plugin is released under LGPLv3+ and is still work in progress. There are some todos on our list that we are currently working on.
  • Anti-Aliasing for Hardware Rendering
  • Support GCC with the external Rive-Library
  • Improving the interface to QML
  • Plugin Documentation (once the Interface to QML is in a good shape)

Final Thoughts

We believe the RiveQtQuickPlugin will make building animations for QtQuick/QML applications a more creative, enjoyable, and streamlined process for developers and designers alike.

As always, we welcome feedback, suggestions, and queries from the community. Let’s continue our journey of technological innovation together!

Visit our GitHub to get started with RiveQtQuickPlugin today.

Happy coding!

Stay tuned to our blog for more updates, tutorials, and discussions about all things Qt and Rive.

Picture of Jeremias Bosch

Jeremias Bosch

Jeremias Bosch consults in his position as Technical Project Manager our customers in building embedded HMI applications, as well as the implementation of next generation cloud projects. He is responsible for the system/software-architecture and the development within customer projects as well as the agile project management. He has over 12 years of experience in developing HMIs and Web Applications. He has delivered multiple large and medium scale Qt Quick and cloud applications in industries such as automotive, aerospace and manufacturing engineering. He holds a diploma of computer science from the University of Applied Sciences in Isny. Is a certifed SCRUM Master and Product Owner as well as a certifed Qt Developer.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Weitere Blogartikel

Qt
How To Use Modern QML Tooling in Practice
Qt 5.15 introduced “Automatic Type Registration”. With it, a C++ class can be marked as “QML_ELEMENT” to be automatically registered to the QML engine. Qt 6 takes this to the next level and builds all of its tooling around the so-called QML Modules. Let’s talk about what this new infrastructure means to your application in practice and how to benefit from it in an existing project.
Qt
Use Compute Shader in Qt Quick
With this blog post, we introduce the QtQuickComputeItem – a Qt Quick item that allows you to easily integrate compute shader into your Qt Quick Code. Compute Shader are used to perform arbitrary computations on the GPU. For example, the screenshot below shows a Qt Quick application that generates Gray Scott Reaction Diffusion patterns.  The simulation is executed by a compute shader that is configured directly in QML.
COOL – Flutter for embedded systems – a new approach for industrial HMIs
Join us at the April 2024 edition of the OSADL COOL series to hear about using Flutter for Embedded Linux HMIs.

🗓️ Date & Time: 24th April 2024, 2 PM
🌐 Format: Online, 2-hour session
Qt
Hello, RHI – How to get started with Qt RHI
For some time now, Qt has been internally utilizing RHI (Rendering Hardware Interface), a new cross-platform technology for graphic rendering. Since Qt 6.6, this API has been semi-public, meaning that the API is mature for practical use but may still be subject to potential changes between major Qt versions. In this blog post, we demonstrate how to to get started with RHI.
RiveQtQuickPlugin now with Text Support
The RiveQtQuickPlugin has now integrated the latest rivecpp version. We’ve implemented rendering support for rive text elements. We ensured seamless text rendering compatibility across both software and hardware-backed renderers. Explore our latest blog post for a demonstration video and to learn about more rendering enhancements.
Embed Rive in your QtQuick applications
Learn how to use Rive within Qt and Qt Quick. Rive is a tool (and file format) that enables you to create interactive vector animations. With the RiveQtQuickPlugin, you can effortlessly load and display Rive animations within your QtQuick projects. In this article, we will demonstrate how to embed Rive files, use different rendering backends, load artboards and trigger animations.
Get In Touch 1 basysKom, HMI Dienstleistung, Qt, Cloud, Azure

Heike Ziegler

Managing Director

Get in touch

Bitte aktiviere JavaScript in deinem Browser, um dieses Formular fertigzustellen.

Was ergibt 7+4?

Checkboxen
BasysKOM Newsletter
IHR DIGITALES UPDATE

Unser Newsletter hält Sie regelmäßig auf dem Laufenden. Wir informieren Sie über technologisch Relevantes und Neues.

Jetzt abonnieren! Spannend, gratis und natürlich können Sie sich jederzeit abmelden. Wir freuen uns auf Sie.

Einfach Ihre E-Mail eintragen

Einfach Ihre E-Mail eintragen Einfach Ihre E-Mail eintragen
Services
Technologien
Über uns

Folgen Sie uns

Xing Linkedin Youtube Facebook Github

basysKom Newsletter

We collect only the data you enter in this form (no IP address or information that can be derived from it). The collected data is only used in order to send you our regular newsletters, from which you can unsubscribe at any point using the link at the bottom of each newsletter. We will retain this information until you ask us to delete it permanently. For more information about our privacy policy, read Privacy Policy