QMLコンポーネントで2つの状態間で異なる遷移アニメーションを使用することは可能ですか?次の例は機能せず、プログラムがクラッシュします(Linuxでのセグメンテーション違反)。
import QtQuick 1.0
Rectangle {
id: canvas
height: 500; width: 600
Rectangle { id: rect; color: "#04A"; height: 100; width: 100 }
state: "A"
states: [
State { name: "A"; PropertyChanges { target: rect; x: 0; y: 100 } },
State { name: "B"; PropertyChanges { target: rect; x: 500; y: 100 } }
]
transitions: trans1
property list<Transition> trans1: [
Transition {
NumberAnimation { target: rect; property: "x"; duration: 500 }
}
]
property list<Transition> trans2: [
Transition {
from: "A"; to: "B"
SequentialAnimation {
NumberAnimation { target: rect; property: "x"; from: 0; to: -100; duration: 250 }
NumberAnimation { target: rect; property: "x"; from: 600; to: 500; duration: 250 }
}
},
Transition {
from: "B"; to: "A"
SequentialAnimation {
NumberAnimation { target: rect; property: "x"; from: 500; to: 600; duration: 250 }
NumberAnimation { target: rect; property: "x"; from: -100; to: 0; duration: 250 }
}
}
]
// test script /////////////////////////////////////////////////////////
Timer { interval: 1000; running: true; onTriggered: canvas.state = "B" }
Timer { interval: 2000; running: true; onTriggered: canvas.state = "A" }
// change kind of transition
Timer { interval: 3000; running: true; onTriggered: canvas.transitions = trans2 }
Timer { interval: 4000; running: true; onTriggered: canvas.state = "B" }
Timer { interval: 5000; running: true; onTriggered: canvas.state = "A" }
}
QML-Docによると、プロパティtranstition
は読み取り専用ですが、通常は要素のリストがTransition{...}
このプロパティに割り当てられているため、実際には読み取り専用にすることはできません。
1つの解決策は、、、、などの4つの状態を使用しA1
、のように見えるとの間の遷移とB1
、のように見えるとの間の別の遷移を定義することです。
しかし、私はこのようなことが新しい状態を導入することなく可能かどうか知りたいです。A2
B2
A1
B1
trans1
A2
B2
trans2
編集:
/プロパティを変更するためのgregschlomの提案は、ここでは例として機能します。from
to
import QtQuick 1.0
Rectangle {
id: canvas
height: 500; width: 600
Rectangle { id: rect; color: "#04A"; height: 100; width: 100 }
state: "A"
states: [
State { name: "A"; PropertyChanges { target: rect; x: 0; y: 100 } },
State { name: "B"; PropertyChanges { target: rect; x: 500; y: 100 } }
]
property int transType: 1
transitions: [
Transition {
from: transType == 1 ? "*" : "none"
to: transType == 1 ? "*" : "none"
ParallelAnimation {
RotationAnimation { target: rect; property: "rotation"; from: 0; to:360; duration: 500 }
NumberAnimation { target: rect; property: "x"; duration: 500 }
}
},
Transition {
from: transType == 2 ? "*" : "none"
to: transType == 2 ? "*" : "none"
NumberAnimation { target: rect; property: "x"; duration: 500 }
}
]
// test script /////////////////////////////////////////////////////////
Timer { interval: 1000; running: true; onTriggered: canvas.state = "B" }
Timer { interval: 2000; running: true; onTriggered: canvas.state = "A" }
// change kind of transition
Timer { interval: 3000; running: true; onTriggered: canvas.transType = 2 }
Timer { interval: 4000; running: true; onTriggered: canvas.state = "B" }
Timer { interval: 5000; running: true; onTriggered: canvas.state = "A" }
}