Transition QML Type
状態の変化時に発生するアニメーション遷移を定義します。詳細...
| Import Statement: | import QtQuick |
プロパティ
- animations : list<Animation>
- enabled : bool
- from : string
- reversible : bool
- running : bool
- to : string
詳細説明
トランジションは、State の変更が発生した際に適用されるアニメーションを定義します。
たとえば、次のRectangle には、デフォルトの状態と、追加された「moved」状態の2つの状態があります。「moved」状態では、矩形の位置が(50, 50)に変わります。 追加されたトランジションは、矩形がデフォルト状態と「moved」状態の間で切り替わる際、x およびy プロパティの変更を、Easing.InOutQuad を使用してアニメーション化するように指定しています。
import QtQuick
Rectangle {
id: rect
width: 100; height: 100
color: "red"
MouseArea {
id: mouseArea
anchors.fill: parent
}
states: State {
name: "moved"; when: mouseArea.pressed
PropertyChanges { target: rect; x: 50; y: 50 }
}
transitions: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
}
}この例では、NumberAnimation に対してto およびfrom の値を指定する必要がない点に注意してください。利便性のため、これらのプロパティは状態変化の前後で、自動的にx およびy の値に設定されます。from の値はx およびy の現在の値から、to の値はPropertyChanges オブジェクトから提供されます。必要に応じて、to およびfrom の値を指定して、デフォルト値を上書きすることも可能です。
デフォルトでは、Transition のアニメーションは親アイテムの状態が変更されるたびに適用されます。Transition の `from ` および `to ` の値を設定することで、特定の状態から別の状態へ移行する際にのみアニメーションが適用されるように制限できます。
トランジション内の最上位のアニメーションは並列で実行されます。これらを順次実行するには、SequentialAnimation 内で定義します：
transitions: Transition {
to: "brighter"
reversible: true
SequentialAnimation {
PropertyAnimation { property: "x"; duration: 1000 }
ColorAnimation { duration: 1000 }
}
}複数のトランジションを定義するには、Item::transitions をリストとして指定します：
transitions: [
Transition {
from: "*"; to: "middleRight"
NumberAnimation {
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 2000;
}
},
Transition {
from: "*"; to: "bottomLeft";
NumberAnimation {
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 200;
}
},
//If any other rectangle is clicked, the icon will return
//to the start position at a slow speed and bounce.
Transition {
from: "*"; to: "*";
NumberAnimation {
easing.type: Easing.OutBounce;
properties: "x,y";
duration: 4000;
}
}
]複数のTransitionが指定されている場合、特定の状態変化に対しては、1つ（最も一致する）Transitionのみが適用されます。上記の例では、Rectangleが"middleRight" や"bottomLeft" 以外の状態に入った場合、3番目のTransitionが実行され、アイコンは開始点に移動します。
状態変化に対して、Behavior と同じプロパティに一致するTransitionが指定されている場合、その状態変化については、TransitionのアニメーションがBehavior よりも優先されます。
「 Qt Quick 」の「 アニメーションとトランジション」、「状態の例」、「Qt Quick 状態」、および Qt Qml。
プロパティのドキュメント
animations : list<Animation> [default read-only]
このプロパティには、このトランジションで実行されるアニメーションのリストが格納されています。
transitions: Transition {
PropertyAnimation { duration: 3000 }
ColorAnimation { duration: 3000 }
}最上位のアニメーションは並列で実行されます。これらを順次実行するには、SequentialAnimation 内で定義してください：
transitions: Transition {
to: "brighter"
reversible: true
SequentialAnimation {
PropertyAnimation { property: "x"; duration: 1000 }
ColorAnimation { duration: 1000 }
}
}enabled : bool
このプロパティは、from 状態からto 状態に移行する際に、トランジションが実行されるかどうかを指定します。
デフォルトでは、トランジションは有効になっています。
なお、状況によっては、トランジションを無効にすると、代わりに別のトランジションが使用される場合があります。次の例では、最初のトランジションは「state1」から「state2」への変更をアニメーション表示するように設定されていますが、enabled をfalse に設定することでこのトランジションが無効になっているため、そのような状態変更は実際には2番目のトランジションによってアニメーション表示されます。
Item {
states: [
State { name: "state1" },
State { name: "state2" }
]
transitions: [
Transition { from: "state1"; to: "state2"; enabled: false },
Transition {
// ...
}
]
}これらのプロパティは、遷移をトリガーする状態の変化を示しています。
これらのプロパティのデフォルト値は「*」（つまり、任意の状態）です。
たとえば、次の遷移では、to およびfrom プロパティが設定されていないため、2 つの状態の間で切り替わる際（つまり、マウスが押されたときや離されたとき）、常にアニメーションが適用されます。
Rectangle {
id: rect
width: 100; height: 100
color: "red"
MouseArea { id: mouseArea; anchors.fill: parent }
states: State {
name: "brighter"; when: mouseArea.pressed
PropertyChanges { target: rect; color: "yellow" }
}
transitions: Transition {
ColorAnimation { duration: 1000 }
}
}この遷移を次のように変更した場合：
transitions: Transition {
to: "brighter"
ColorAnimation { duration: 1000 }
}アニメーションは、デフォルトの状態から「brighter」の状態へ遷移する場合にのみ適用されます（つまり、マウスが押されたときは適用されますが、離されたときは適用されません）。
カンマ区切りの文字列を使用することで、複数の `to ` および `from ` の値を設定できます。
reversibleも参照してください 。
reversible : bool
このプロパティは、この遷移をトリガーした条件が逆転した場合に、遷移を自動的に逆方向に実行するかどうかを指定します。
デフォルト値は false です。
デフォルトでは、from およびto 状態が設定されていない場合、遷移は並行して実行され、すべての状態変化に適用されます。この状況では、状態変化が元に戻ったときに遷移が自動的に適用されるため、遷移を元に戻すためにこのプロパティを設定する必要はありません。
ただし、SequentialAnimation が使用されている場合、またはfrom やto プロパティが設定されている場合は、状態変更が元に戻された際に遷移を元に戻すために、このプロパティを設定する必要があります。たとえば、次の遷移は、マウスが押されたときに順次アニメーションを適用し、マウスが離されたときにアニメーションの順序を逆転させます。
Rectangle {
id: rect
width: 100; height: 100
color: "steelblue"
TapHandler { id: tapHandler }
states: State {
name: "brighter"
when: tapHandler.pressed
PropertyChanges { target: rect; color: "lightsteelblue"; x: 50 }
}
transitions: Transition {
to: "brighter"
reversible: true
SequentialAnimation {
PropertyAnimation { property: "x"; duration: 1000 }
ColorAnimation { duration: 1000 }
}
}
}もしトランジションでto およびreversible の値が設定されていない場合、マウスが離された際に、トランジションは順序を逆転させるのではなく、ColorAnimation の前にPropertyAnimation を再生してしまいます。
running : bool [read-only]
このプロパティは、トランジションが現在実行中かどうかを表します。
注： Animation::runningとは異なり 、このプロパティは読み取り専用であり、トランジションの制御には使用できません。
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
