CODEWITHSUNDEEP
qtanimationqmlqt-quick
Sherafati
Sherafati

Reputation: 216

QML - How to have an animating background?

I want to have a rectangle that has a background animation. take a look at this

codepen.io/shshaw/pen/DxJka

How can I set this as my rectangle background so that it shows this animation in my application?

I want to be able to "load" premade css animations like the one in the link.

Upvotes: 0

Views: 688

Answers (2)

malek.khlif
malek.khlif

Reputation: 85

If you think to use css, you can use a WebView and in this WebView you can load a html file from resource that read css file from resources too

Upvotes: 2

Amfasis
Amfasis

Reputation: 4168

Within QML there is the possibility to use particle emitters, see Qt Docs for some information. The following should get you going a bit.

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.4
import QtQuick.Particles 2.0

Item {

    Rectangle {
        color: "#F9A72B"
        anchors.fill: parent
    }

    ParticleSystem { id: particles }

    ImageParticle {
        system: particles
        source: "qrc:/cloud.svg"
        alpha: 0.4
        alphaVariation: 0.2
    }

    Emitter {
        system: particles
        emitRate: 1
        lifeSpan: 70000
        velocity: PointDirection { x: -10; xVariation: -5; }
        size: 20
        sizeVariation: 10
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 5
    }
}

Obviously, you will have to play with the parameters to get it to your liking.

Upvotes: 1

Related Questions