Back to Qt.io
Contact Us Blog Download Qt
このページでは

C

PropertyAnimation QML Type

プロパティ値の変化をアニメーション表示します。詳細...

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

Animation

Inherited By:

ColorAnimation, CoordinateAnimation, NumberAnimation, RotationAnimation, and TimelineAnimation

プロパティ

詳細な説明

PropertyAnimation は、プロパティの値の変化をアニメーション化する手段を提供します。

これを使用して、以下のさまざまな方法でアニメーションを定義できます：

  • Transition

    例えば、状態の変化の結果としてx またはy プロパティが変更されたオブジェクトを、InOutQuad のイージングカーブを使用してアニメーション化するには：

    Item {
    id: root

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"
    }

    states: State {
        name: "moved"
        PropertyChanges { target: rect; x: 50 }
    }

    transitions: Transition {
        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}
  • ...内でBehavior

    例えば、矩形のx プロパティに対するすべての変更をアニメーション化するには：

    Rectangle {
    width: 100; height: 100
    color: "red"

    Behavior on x { PropertyAnimation {} }

    MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
}
  • プロパティ値のソースとして

    たとえば、矩形のx プロパティを繰り返しアニメーション化するには：

    Rectangle {
    width: 100; height: 100
    color: "red"

    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation { to: 50 }
        PropertyAnimation { to: 0 }
    }
}
  • スタンドアロン

    たとえば、rect のwidth プロパティを、現在の幅から30まで、500msかけてアニメーションさせるには：

    Rectangle {
    id: theRect
    width: 100; height: 100
    color: "red"

    // this is a standalone animation, it's not running by default
    PropertyAnimation { id: animation;
                        target: theRect;
                        property: "width";
                        to: 30;
                        duration: 500 }

    MouseArea { anchors.fill: parent; onClicked: animation.running = true }
}

アニメーションの使用方法によって、通常使用されるプロパティのセットは異なります。詳細については、個々のプロパティのドキュメントおよび「アニメーションとトランジション」の入門編を参照してください。

PropertyAnimationは抽象型Animation を継承している点に注意してください。これには、アニメーションを制御するための追加のプロパティやメソッドが含まれています。

「アニメーションとトランジション」も参照してください 。

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

duration : int

このプロパティには、アニメーションの継続時間がミリ秒単位で格納されます。

デフォルト値は 250 です。

easing group

easing.bezierCurve : list<real>

easing.type : enumeration

アニメーションに使用するイージングカーブを指定します

イージングカーブを指定するには、少なくともそのタイプを指定する必要があります。デフォルトのイージングカーブは「Easing.Linear 」です。

PropertyAnimation { properties: "y";
                    easing.type: Easing.InOutSine;
                  }

利用可能なタイプは以下の通りです：

Easing.Linear線形（t）関数用のイージングカーブ：速度は一定です。
Easing.InQuad2次関数（t^2）のイージングカーブ：速度ゼロから加速します。
Easing.OutQuad2次関数 (t^2) に対応するイージングカーブ：速度がゼロになるまで減速します。
Easing.InOutQuad2次関数（t^2）のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInQuad2次関数（t^2）のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InCubic3次（t^3）関数のイージングカーブ：速度ゼロから加速します。
Easing.OutCubic3次（t^3）関数のイージングカーブ：速度がゼロになるまで減速する。
Easing.InOutCubic3次（t^3）関数のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInCubic3次（t^3）関数のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InQuart4次（t^4）関数のイージングカーブ：速度ゼロから加速する。
Easing.OutQuart4次（t^4）関数のイージングカーブ：速度ゼロまで減速する。
Easing.InOutQuart4次（t^4）関数のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInQuart4次（t^4）関数のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InQuint5次関数 (t^5) のイージングカーブ：速度ゼロから加速。
Easing.OutQuint5次（t^5）関数のイージングカーブ：速度ゼロまで減速する。
Easing.InOutQuint5次関数 (t^5) のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInQuint5次関数 (t^5) のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InSine正弦波（sin(t)）関数のイージング曲線：速度ゼロから加速する。
Easing.OutSine正弦波（sin(t)）関数のイージングカーブ：速度ゼロまで減速する。
Easing.InOutSine正弦波（sin(t)）関数のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInSine正弦波（sin(t)）関数のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InExpo指数関数（2^t）のイージングカーブ：速度ゼロから加速。
Easing.OutExpo指数関数（2^t）のイージングカーブ：速度がゼロになるまで減速する。
Easing.InOutExpo指数関数（2^t）のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInExpo指数関数（2^t）のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InCirc円形（sqrt(1-t^2)）関数のイージングカーブ：速度ゼロから加速する。
Easing.OutCirc円形（sqrt(1-t^2)）関数のイージングカーブ：速度ゼロまで減速する。
Easing.InOutCirc円形関数（sqrt(1-t^2)）のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInCirc円形（sqrt(1-t^2)）関数のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InElastic弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：速度ゼロから加速します。ピーク振幅（1.0）と減衰周期（0.3）にはデフォルト値が使用されています。
Easing.OutElastic弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：速度がゼロになるまで減速します。ピーク振幅（1.0）と減衰期間（0.3）にはデフォルト値が使用されています。
Easing.InOutElastic弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInElastic弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：半分の位置まで減速し、その後加速する。
Easing.InBackバック（オーバーシュートする3次関数：(s+1)*t^3 - s*t^2）のイージングカーブ（イージングイン）：速度ゼロから加速します。オーバーシュートのデフォルト値（s: 1.70158）を使用しています。
Easing.OutBackバック（オーバーシュート付き3次関数：(s+1)*t^3 - s*t^2）のイージングアウト用イージングカーブ：半分の位置まで減速し、その後加速します。オーバーシュートのデフォルト値（s: 1.70158）を使用します。
Easing.InOutBackバック用のイージングカーブ（オーバーシュート付き3次関数：(s+1)*t^3 - s*t^2）、イージンイン／アウト：中間点まで加速し、その後減速します。オーバーシュートのデフォルト値（s: 1.70158）を使用します。
Easing.OutInBackバック用のイージングカーブ（オーバーシュート付き3次イージング：(s+1)*t^3 - s*t^2）アウト／イン：中間点まで減速し、その後加速します。オーバーシュートにはデフォルト値（s: 1.70158）が使用されます。
Easing.InBounceバウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングカーブ：速度ゼロから加速します。
Easing.OutBounceバウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングカーブ：ゼロ速度から減速します。
Easing.InOutBounceバウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングカーブ（イン／アウト）：中間点まで加速し、その後減速します。
Easing.OutInBounceバウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングアウト／イン用のイージングカーブ：中間点まで減速し、その後加速します。
Easing.BezierSplineeasing.bezierCurve プロパティで定義されたカスタムイージングカーブ。

easing.bezierCurve これは、easing.type が「Easing.BezierSpline 」の場合にのみ適用されます。このプロパティは、0,0 から 1,1 までの曲線を定義する 3 つの点のグループ（制御点 1、制御点 2、終点）を含む list<real> です：[cx1, cy1, cx2, cy2, endx, endy, ...]。 最後の点は必ず 1,1 でなければなりません。

注： easing.bezierCurve を設定しても easing.type が指定されていない場合 、qmltocpp ツールは、easing.type を暗黙的にEasing.BezierSpline に設定するコードを生成します。

from : variant

このプロパティは、アニメーションの開始値を保持します。

PropertyAnimation がTransition またはBehavior 内で定義されている場合、この値はデフォルトで、Transition の開始状態で定義された値、またはBehavior がトリガーされた時点でのプロパティの現在の値になります。

「アニメーションとトランジション」も参照してください 。

properties : string

property : string

target : Object

これらのプロパティは、どのプロパティをアニメーション化すべきかを決定するためのセットとして使用されます。単数形と複数形は機能的に同一です。例えば、

NumberAnimation {
    target: theItem;
    property: "x";
    to: 500;
}

は

NumberAnimation {
    targets theItem;
    properties: "x";
    to: 500;
}

多くの場合、これらのプロパティはアニメーションフレームワークから推論できるため、明示的に指定する必要はありません：

値ソース / ビヘイビアアニメーションが値ソースとして、またはBehavior内で使用される場合、デフォルトのターゲットおよびアニメーションの対象となるプロパティ名は、いずれも推論されます。
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
    Behavior on y { NumberAnimation {} } //animate theRect's y property
}
トランジショントランジションで使用される場合、プロパティアニメーションはすべてのターゲットに一致するとみなされますが、プロパティには一致しないとみなされます。実際には、アニメーションを機能させるためには、少なくともプロパティを指定する必要があります。
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    Item { id: uselessItem }
    states: State {
        name: "state1"
        PropertyChanges {
            theRect {
                x: 200
                y: 200
                z: 4
            }
        }
        PropertyChanges {
            uselessItem {
                x: 10
                y: 10
                z: 2
            }
        }
    }
    transitions: Transition {
        //animate both theRect's and uselessItem's x and y to their final values
        NumberAnimation { properties: "x,y" }

        //animate theRect's z to its final value
        NumberAnimation { target: theRect; property: "z" }
    }
}
単独使用アニメーションを単独で使用する場合、ターゲットとプロパティの両方を明示的に指定する必要があります。
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    //need to explicitly specify target and property
    NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
    MouseArea {
        anchors.fill: parent
        onClicked: theAnim.start()
    }
}

上記の例にあるように、properties には、アニメーションの対象となるプロパティ名をカンマ区切りで指定します。

「アニメーション」および「トランジション」も参照してください 。

to : variant

このプロパティは、アニメーションの終了値を保持します。

PropertyAnimation がTransition またはBehavior 内で定義されている場合、この値はデフォルトで、Transition の終了状態で定義された値、またはBehavior をトリガーしたプロパティ変更の値になります。

「アニメーションとトランジション」も参照してください 。

特定のQtライセンスの下で利用可能です。
詳細はこちらをご覧ください。