PropertyAnimation QML Type

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

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

プロパティ

• duration : int
• easing
  • easing.bezierCurve : list<real>
  • easing.type : enumeration
• from : variant
• properties : string
• property : string
• target : Object
• to : variant

詳細な説明

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.Linear 」です。

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

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

Easing.Linear	線形（t）関数用のイージングカーブ：速度は一定です。
Easing.InQuad	2次関数（t^2）のイージングカーブ：速度ゼロから加速します。
Easing.OutQuad	2次関数 (t^2) に基づくイージングカーブ：速度がゼロまで減速します。
Easing.InOutQuad	2次関数 (t^2) に基づくイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInQuad	2次関数 (t^2) のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InCubic	3次（t^3）関数のイージング曲線：初速度ゼロから加速する。
Easing.OutCubic	3次（t^3）関数のイージングカーブ：速度ゼロまで減速する。
Easing.InOutCubic	3次（t^3）関数のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInCubic	3次（t^3）関数のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InQuart	4次（t^4）関数のイージングカーブ：速度ゼロから加速する。
Easing.OutQuart	4次（t^4）関数のイージングカーブ：速度ゼロまで減速する。
Easing.InOutQuart	4次（t^4）関数のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInQuart	4次 (t^4) 関数のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InQuint	5次関数 (t^5) のイージングカーブ：初速度ゼロから加速。
Easing.OutQuint	5次（t^5）関数のイージングカーブ：速度ゼロまで減速する。
Easing.InOutQuint	5次関数 (t^5) のイージングカーブ：中間点まで加速し、その後減速する。
Easing.OutInQuint	5次関数 (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.BezierSpline	easing.bezierCurve プロパティで定義されたカスタムイージングカーブ。

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

from : variant

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

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

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

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

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

は、

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

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

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 ライセンスで利用可能です。
詳細はこちらをご覧ください。