{"id":5476,"date":"2023-09-06T07:41:45","date_gmt":"2023-09-06T05:41:45","guid":{"rendered":"https:\/\/www.basyskom.de\/?p=5476"},"modified":"2024-07-18T15:21:40","modified_gmt":"2024-07-18T13:21:40","slug":"introducing-the-riveqtquickplugin-powerful-animations-for-your-qtquick-applications","status":"publish","type":"post","link":"https:\/\/www.basyskom.de\/en\/introducing-the-riveqtquickplugin-powerful-animations-for-your-qtquick-applications\/","title":{"rendered":"Introducing the RiveQtQuickPlugin &#8211; Powerful Animations For Your QtQuick Applications"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"5476\" class=\"elementor elementor-5476\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0819f26 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"0819f26\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5981bed elementor-widget elementor-widget-heading\" data-id=\"5981bed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Motivation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1bf339 elementor-widget elementor-widget-text-editor\" data-id=\"a1bf339\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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 <a href=\"https:\/\/www.qt.io\/blog\/2019\/03\/08\/announcing-qtlottie\" target=\"_blank\" rel=\"noopener\">built-in support since 5.13<\/a>. In addition there is also the <a href=\"https:\/\/github.com\/kbroulik\/lottie-qml\" target=\"_blank\" rel=\"noopener\">lottie-qml<\/a> project.<\/p><p>So why did we bother creating the RiveQtQuickPlugin?<\/p><p>Lottie has a few downsides.<\/p><ul><li>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.<\/li><li>Lottie is non-interactive. It is not possible to create interactive animations without involving a software developer.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c880a05 elementor-widget elementor-widget-heading\" data-id=\"c880a05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">RiveQtQuickPlugin: A Quick Overview<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf919f2 elementor-widget elementor-widget-text-editor\" data-id=\"cf919f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>While the RiveQtQuickPlugin is currently still work in progress, it already provides the following features that enhance the functionality of your QtQuick\/QML applications.<\/p><ul><li><strong>Rive and Qt Quick Integration<\/strong>:<br \/>Import and manipulate Rive animations in your QtQuick\/QML\u00a0application, using simple QML types.<\/li><li><strong>Dynamic Interaction<\/strong>:<br \/>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.<\/li><li><strong>Multi-Platform-Multi-Qt<\/strong>:<br \/>Qt5.15.2+ with Software and Hardware Rendering<br \/>Qt6.5 with Software and Hardware Rendering<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f82f54 elementor-widget elementor-widget-heading\" data-id=\"7f82f54\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Getting Started<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3b133d elementor-widget elementor-widget-text-editor\" data-id=\"f3b133d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can access&nbsp;<span style=\"font-weight: bolder;\">RiveQtQuickPlugin<\/span>&nbsp;on our GitHub repository&nbsp;<a href=\"https:\/\/github.com\/basysKom\/RiveQtQuickPlugin\" target=\"_new\" rel=\"noopener\">here<\/a>.<\/p>\n<p>We have put together a detailed README to guide you through the setup, use and customization of the plugin.<\/p>\n<p>Don&#8217;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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-918a70b elementor-widget elementor-widget-heading\" data-id=\"918a70b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span style=\"text-align: var(--text-align)\">The State of Development<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fb14e2 elementor-widget elementor-widget-text-editor\" data-id=\"8fb14e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tThe Plugin is released under LGPLv3+ and is still work in progress. There are some todos on our list that we are currently working on.\n<ul>\n \t<li>Anti-Aliasing for Hardware Rendering<\/li>\n \t<li>Support GCC with the external Rive-Library<\/li>\n \t<li>Improving the interface to QML<\/li>\n \t<li>Plugin Documentation (once the Interface to QML is in a good shape)<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dff1ea1 elementor-widget elementor-widget-heading\" data-id=\"dff1ea1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Final Thoughts\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21e94f8 elementor-widget elementor-widget-text-editor\" data-id=\"21e94f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We believe the <strong>RiveQtQuickPlugin<\/strong> will make building animations for QtQuick\/QML applications a more creative, enjoyable, and streamlined process for developers and designers alike.<\/p><p>As always, we welcome feedback, suggestions, and queries from the community. Let&#8217;s continue our journey of technological innovation together!<\/p><p>Visit our <a href=\"https:\/\/github.com\/basysKom\/RiveQtQuickPlugin\" target=\"_new\" rel=\"noopener\">GitHub<\/a> to get started with <b>RiveQtQuickPlugin <\/b>today.<\/p><p>Happy coding!<\/p><p>Stay tuned to our blog for more updates, tutorials, and discussions about all things Qt and Rive.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>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.<\/p>","protected":false},"author":1,"featured_media":8386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1,2,7,8],"tags":[126,15,257],"class_list":["post-5476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-blog","category-general","category-qt","tag-qml","tag-qt","tag-rive"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/5476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/comments?post=5476"}],"version-history":[{"count":57,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/5476\/revisions"}],"predecessor-version":[{"id":10800,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/posts\/5476\/revisions\/10800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media\/8386"}],"wp:attachment":[{"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/media?parent=5476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/categories?post=5476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.basyskom.de\/en\/wp-json\/wp\/v2\/tags?post=5476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}