QML how to make Behavior working on multiple properties

Question

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.

Answer 1

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!