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