qtqmlqtquick2behaviorqt-quick

QML how to make Behavior working on multiple properties


Is there any way to make Behavior work on multiple attributes simultaneously to simplify the code?

ApplicationWindow {
    width: 1280
    height: 720
    visible: true
    title: qsTr("Hello World")
    color:"#202020"

    Rectangle{
        id:rect
        x:100
        y:100
        width: 100
        height: 50
        color:"red"

        Behavior on x, y, width, height, color{ //there will be error here
            PropertyAnimation{duration:1000}
        }
    }

    Button{
        onClicked: {
            rect.x=300
            rect.y=400
            rect.width=200
            rect.height100
            rect.color="green"
        }
    }
}

I want all 5 attributes to have a smooth change effect, so I have to define 5 Behaviors and apply them to each of these 5 properties separately, I think this is troublesome.


Solution

  • Perhaps you would like to try State and Transition instead of Behavior ?

    import QtQuick
    import QtQuick.Controls
    Page {
        title: "State + Transition"
    
        Rectangle {
            id: rect
            x:100
            y:100
            width: 100
            height: 50
            color:"red"
        }
    
        CheckBox {
            id: chk
            text: "Move"
            states: State {
                name: "moved"; when: chk.checked
                PropertyChanges { target: rect; x: 300; y: 400; width: 200; height: 100; color: "green" }
            }
            transitions: Transition {
                PropertyAnimation { properties: "x,y,width,height,color"; duration: 1000 }
            }
        }
    }
    

    You can Try it Online!

    [EDIT] Another solution you may wish to consider is to use Instantiator + PropertyAnimation. By controlling Instantiator's model, you can create/destroy animations as well as feed them custom values, for instance:

    import QtQuick
    import QtQuick.Controls
    Page {
        id: page
    
        title: "Instantiator + PropertyAnimation"
    
        Rectangle {
            id: rect
            x:100
            y:100
            width: 100
            height: 50
            color:"red"
        }
    
        Timer {
            running: true
            repeat: true
            interval: 1000
            triggeredOnStart: true
            onTriggered: {
                instantiator.model = [
                    ["x",Math.random() * page.width],
                    ["y",Math.random() * page.height],
                    ["width",Math.random() * 200],
                    ["height",Math.random() * 200],
                    ["color",Qt.rgba(Math.random(),
                                     Math.random(),
                                     Math.random(),1)],
                    ["rotation",Math.random() * 360],
                ];
            }
        }
    
        Instantiator {
            id: instantiator
            model: 0
            PropertyAnimation {
                target: rect
                property: modelData[0]
                to: modelData[1]
                duration: 1000
                Component.onCompleted: start()
            }
        }
    }
    

    You can Try it Online!