Transition QML Type

状態遷移時に発生するアニメーション遷移を定義する。詳細...

Import Statement: import QtQuick

継承されたメンバーを含む全メンバーのリスト

プロパティ

animations : list<Animation>
enabled : bool
from : string
reversible : bool
running : bool
to : string

詳細説明

Transition は、State の変更が発生したときに適用されるアニメーションを定義します。

たとえば、次のRectangle は、デフォルトの状態と、追加された「moved」状態の 2 つの状態を持っています。moved状態では、矩形の位置は(50, 50)に変化します。追加されたTransitionは、矩形がデフォルト状態と「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 のアニメーションは、親アイテムの状態変化に対して適用されます。トランジション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;
            }
        }
    ]

複数のトランジションが指定された場合、特定の状態変化に対して適用されるトランジションは1つ（ベストマッチ）だけです。上記の例では、Rectangle が"middleRight" または"bottomLeft" 以外の状態になった場合、3 番目の Transition が実行され、アイコンは開始点に移動します。

ステートチェンジがBehavior と同じプロパティに一致する Transition を持つ場合、Transition アニメーションはそのステートチェンジのBehavior をオーバーライドします。

Qt Quickのアニメーションとトランジション」、「Statesの例」、「Qt Quick States」、「Qt Qml」も参照してください。

プロパティのドキュメント

from : string

to : string

これらのプロパティは、遷移のトリガーとなる状態変化を示します。

これらのプロパティのデフォルト値は "*"（つまり、任意の状態）です。

例えば、次のトランジションでは、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 }
}

アニメーションは、デフォルトの状態から「明るい」状態に変化するとき（つまり、マウスが押されたとき、離されたとき）だけ適用されます。

カンマ区切りの文字列を使用することで、to とfrom の値を複数設定することができます。

reversibleも参照。

animations : list<Animation> [default]

このプロパティは、このトランジションで実行されるアニメーションのリストを保持します。

    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 の状態に移行するときに、Transition を実行するかどうかを保持します。

デフォルトでは、Transitionは有効です。

Transitionを無効にすると、代替のTransitionが使用される場合があることに注意してください。以下の例では、最初のトランジションは「state1」から「state2」への変化をアニメーション化するように設定されていますが、このトランジションはenabled をfalse に設定することで無効化されています。

Item {
    states: [
        State { name: "state1" },
        State { name: "state2" }
    ]
    transitions: [
        Transition { from: "state1"; to: "state2"; enabled: false },
        Transition {
            // ...
        }
    ]
}

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 とは異なり、このプロパティは読み取り専用で、トランジションを制御するために使用することはできません。

本ドキュメントに含まれる文書の著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。