Simple Screen Saver



  • 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.


  • Moderators

    @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.



  • @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() }
            }
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.