QML cómo hacer que el comportamiento funcione en múltiples propiedades
¿Hay alguna manera de hacer que Behavior funcione en múltiples atributos simultáneamente para simplificar el código?
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"
}
}
}
Quiero que los 5 atributos tengan un efecto de cambio suave, así que tengo que definir 5 comportamientos y aplicarlos a cada una de estas 5 propiedades por separado, creo que esto es problemático.
Aceptado
¿Quizás te gustaría probar Statey Transitionen lugar de 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 }
}
}
}
¡ Puedes probarlo en línea!
[EDITAR] Otra solución que quizás quieras considerar es usar Instantiator+ PropertyAnimation. Al controlar Instantiator's model, puedes crear/destruir animaciones, así como alimentarlas con valores personalizados, por ejemplo:
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()
}
}
}
¡ Puedes probarlo en línea!
