C

Transition QML Type

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

Import Statement:	`import QtQuick`
Since:	Qt Quick Ultralite 1.0

継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

animations : list<Animation>
from : string
to : string

詳細説明

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

たとえば、次のRectangle には、デフォルト状態とmoved 状態の2つの状態があります。「moved 」状態では、矩形の位置が(50, 50)に変化しますが、これはTransitionによってEasing.InOutQuad を使用してアニメーション化されます。これにより、矩形の状態がデフォルトからmoved に変更されたことが視覚的に示されます。

import QtQuick 2.15

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 の値を設定することで、特定の状態から別の状態へ移行する場合にのみアニメーションが適用されるように制限できます。

複数のトランジションを定義するには、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.
        Transition {
            from: "*"; to: "*";
            NumberAnimation {
                easing.type: Easing.OutExpo;
                properties: "x,y";
                duration: 4000;
            }
        }
    ]

複数のトランジションが指定されている場合、特定の状態変化に対しては、1つ（最も一致する）トランジションのみが適用されます。上記の例では、Rectangleが"middleRight" や"bottomLeft" 以外の状態に入った場合、3番目のトランジションが実行され、アイコンが開始点に移動します。

状態変化に対して、Behavior と同じプロパティに一致するTransitionが指定されている場合、その状態変化におけるBehavior は、Transitionのアニメーションによって上書きされます。

「アニメーションとトランジション」、「状態の使用」、「状態とトランジション」も参照してください 。

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

animations : list<Animation> `[default]`

このプロパティには、このトランジションで実行されるアニメーションのリストが格納されます。

Item {
    transitions: Transition {
        PropertyAnimation { duration: 3000 }
        ColorAnimation { duration: 3000 }
    }
}

最上位のアニメーションは並列で実行されます。これらを順次実行するには、SequentialAnimation 内で定義してください：

Item {
    transitions: Transition {
        SequentialAnimation {
            PropertyAnimation { duration: 3000 }
            ColorAnimation { duration: 3000 }
        }
    }
}

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 }
}

アニメーションは、デフォルトの状態から「brighter」の状態へ切り替わる場合（つまり、マウスが押されたときのみ、離されたときは適用されない）にのみ適用されます。

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

特定のQtライセンス下で利用可能です。
詳細はこちら。

C