C

Transition QML Type

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

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

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

プロパティ

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

詳細説明

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

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

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

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

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

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

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 値を設定することができます。

animations : list<Animation> [default]

このプロパティは、この遷移のために実行されるアニメーションのリストを保持します。

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

トップレベルのアニメーションは並行して実行されます。順次実行するには、SequentialAnimation の中で定義します：

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

Qt の特定のライセンスの下で利用可能です。