Simple Screen Saver

granitepeak99

Re: [SOLVED] Is this a reasonable way to do continuous sprite animation in QML?

Here is one implementation using property animations that produces the "bouncing ball" effect like a screen saver. The basic idea is to animate the x and y properties of an image across the parent item with different animation durations, resulting in a random path.

    Image {
            id: logo
            x: Math.random() * parent.width
            y: Math.random() * parent.height
            source: "qrc:/images/logo.png"
            sourceSize.width: 600

            SequentialAnimation on x {
                id: xAnimation
                loops: Animation.Infinite
                property int from: 0
                property int to: parent.width - logo.width
                property int duration: 15000
                PropertyAnimation {
                    from: xAnimation.from
                    to: xAnimation.to
                    duration: xAnimation.duration
                    easing.type: Easing.Linear
                }
                PropertyAnimation {
                    from: xAnimation.to
                    to: xAnimation.from
                    duration: xAnimation.duration
                    easing.type: Easing.Linear
                }
            }

            SequentialAnimation on y {
                id: yAnimation
                loops: Animation.Infinite
                property int from: 0
                property int to: parent.height - logo.height
                property int duration: 9000
                PropertyAnimation {
                    from: yAnimation.from
                    to: yAnimation.to
                    duration: yAnimation.duration
                    easing.type: Easing.Linear
                }
                PropertyAnimation {
                    from: yAnimation.to
                    to: yAnimation.from
                    duration: yAnimation.duration
                    easing.type: Easing.Linear
                }
            }
        }

If anyone has any better ideas on how to implement this more optimally, please let me know.

p3c0

@granitepeak99 Thank you for sharing. It would be more helpful for users if you provide a complete working example.
Also how about using states and transitions instead of 2 sequential PropertyAnimation? It has reversible property.

granitepeak99

@p3c0 Thanks for the ideas! Here is a complete working example:

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ScreenSaver")

    Text {
        anchors.centerIn: parent
        font.pixelSize: 15
        text: "Wait 10 seconds..."
    }

    Timer {
        id: screenSaverTimer
        interval: 10000
        running: true
        onTriggered: screenSaver.visible = true
    }

    // Reset screensaver timer when clicks are received
    MouseArea {
        anchors.fill: parent

        // Pass mouse events through
        propagateComposedEvents: true
        onClicked: { screenSaverTimer.restart(); mouse.accepted = false }
    }

    Rectangle {
        id: screenSaver
        anchors.fill: parent
        visible: false
        color: "black"

        Text {
            id: screenSaverText
            x: 0
            y: 0
            text: "Hello World"
            color: "blue"
            font.pixelSize: 50

            SequentialAnimation on x {
                id: xAnimation
                loops: Animation.Infinite
                property int from: 0
                property int to: screenSaver.width - screenSaverText.width
                property int duration: 15000
                running: screenSaver.visible
                PropertyAnimation {
                    from: xAnimation.from
                    to: xAnimation.to
                    duration: xAnimation.duration
                    easing.type: Easing.Linear
                }
                PropertyAnimation {
                    from: xAnimation.to
                    to: xAnimation.from
                    duration: xAnimation.duration
                    easing.type: Easing.Linear
                }
            }

            SequentialAnimation on y {
                id: yAnimation
                loops: Animation.Infinite
                property int from: 0
                property int to: screenSaver.height - screenSaverText.height
                property int duration: 9000
                running: screenSaver.visible
                PropertyAnimation {
                    from: yAnimation.from
                    to: yAnimation.to
                    duration: yAnimation.duration
                    easing.type: Easing.Linear
                }
                PropertyAnimation {
                    from: yAnimation.to
                    to: yAnimation.from
                    duration: yAnimation.duration
                    easing.type: Easing.Linear
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: { screenSaver.visible = false; screenSaverTimer.restart() }
        }
    }
}