QML transitions with multiple (from, to) matches - qt

Question

I have a simple QML script with a four states which you go through a cycle, say the states are one, two, three, four.
The transition from one to two and from three to four is the same.
Is there a simple way to define this without duplicating the code for the transition?
This does not work:
transitions: Transition {
from: "one"; to: "two";
from: "three"; to: "four";
ParallelAnimation {
NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}
From the documentation, it seems there is no way of specifying this but
transitions: [ Transition {
from: "one"; to: "two";
ParallelAnimation {
NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}, Transition {
from: "three"; to: "four";
ParallelAnimation {
NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}]

Answer 1

I had a similar issue on a very simple app, it is not a pretty way to do it but the only way I found is like this:
transitions:
Transition {
from: "two"; to: "three";
//whatever animation you have for this
},
//and obviously any other transitions you may have
//any transition you don't specify will do this:
Transition {
from: "*"; to: "*";
ParallelAnimation {
NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}

Answer 2

You can reuse an animation by giving it an id.
import QtQuick 2.0
import QtQuick.Controls 1.0
Rectangle {
id: root
width: 400; height: width
Column {
spacing: 20
Repeater {
model: ["one", "two", "three", "four"]
Button {
text: modelData
onClicked: rect.state = modelData
}
}
}
Rectangle {
id: rect
x: 200; y: 0
width: 60; height: width
color: "red"
state: "one"
states: [
State { name: "one" },
State { name: "two" },
State { name: "three" },
State { name: "four" }
]
NumberAnimation { id: na1; target: rect; property: "y"; to: 200 }
NumberAnimation { id: na2; target: rect; property: "y"; to: 0 }
transitions: [
Transition { from: "one"; to: "two"; animations: na1 },
Transition { from: "two"; to: "three"; animations: na2 },
Transition { from: "three"; to: "four"; animations: na1 },
Transition { from: "four"; to: "one"; animations: na2 }
]
}
}
I'm wondering if you know the concept of default property. In your code, ParallelAnimation is assigned to the default property animations of the Transition, and you can explicitly assign an animation(by it's id) to this default property.