PropertyAnimation QML Type

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

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

プロパティ

• duration : int
• easing
  • easing.amplitude : real
  • easing.bezierCurve : list<real>
  • easing.overshoot : real
  • easing.period : real
  • easing.type : enumeration
• exclude : list<QtObject>
• from : variant
• properties : string
• property : string
• target : QtObject
• targets : list<QtObject>
• to : variant

詳細な説明

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

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

• Transition

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

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

• シグナルハンドラ内では

  たとえば、クリック時にtheObject をフェードアウトさせるには：

  MouseArea {
      anchors.fill: theObject
      onClicked: PropertyAnimation { target: theObject; property: "opacity"; 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 }
  }

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

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

実行中のアニメーションの変更

Qt 6.4 以降、実行中のトップレベルアニメーションに対して、from 、to 、duration 、およびeasing プロパティを設定することが可能になりました。アニメーションは、次のループでこれらの変更を反映します。

「Qt Quick 」の「アニメーションとトランジション」および「Qt Quick 」の「サンプル - アニメーション」も参照してください 。

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

duration : int

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

デフォルト値は 250 です。

easing group

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

イージングカーブを指定するには、少なくともそのタイプを指定する必要があります。一部のカーブでは、振幅、周期、および/またはオーバーシュートを指定することもできます（詳細は表の後に記載されています）。デフォルトのイージングカーブは「Easing.Linear 」です。

PropertyAnimation { properties: "y";
                    easing.type: Easing.InOutElastic;
                    easing.amplitude: 2.0;
                    easing.period: 1.5 }

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

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）関数のイージングカーブ：初速度0から加速します。
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	弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：速度ゼロから加速します。 ピーク振幅はamplitudeパラメータで、減衰周期はperiodパラメータで設定できます。
Easing.OutElastic	弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：半分の位置まで減速し、その後減速する。 ピーク振幅はamplitudeパラメータで、減衰の周期はperiodパラメータで設定できます。
Easing.InOutElastic	弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：中間点まで加速し、その後減速します。
Easing.OutInElastic	弾性（指数関数的に減衰する正弦波）関数のイージングカーブ：中間点まで減速し、その後加速する。
Easing.InBack	バック（オーバーシュートする 3 次関数：(s+1)*t^3 - s*t^2）のイージングカーブ：ゼロ速度から加速します。
Easing.OutBack	バック（オーバーシュートする3次関数：(s+1)*t^3 - s*t^2）のイージングアウト：減速し、速度がゼロになる。
Easing.InOutBack	バック（オーバーシュートする3次関数：(s+1)*t^3 - s*t^2）のイージングイン／アウト：中間点まで加速し、その後減速する。
Easing.OutInBack	バック用のイージングカーブ（オーバーシュートする3次イージング：(s+1)*t^3 - s*t^2）、イージングアウト／イン：中間点まで減速し、その後加速。
Easing.InBounce	バウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングカーブ：速度ゼロから加速します。
Easing.OutBounce	バウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングカーブ：速度がゼロになるまで減速。
Easing.InOutBounce	バウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングカーブ（イージングイン／アウト）：中間点まで加速し、その後減速します。
Easing.OutInBounce	バウンス（指数関数的に減衰する放物線状のバウンス）関数のイージングカーブ（アウト/イン）：中間点まで減速し、その後加速する。
Easing.BezierSpline	easing.bezierCurve プロパティによって定義されるカスタムイージングカーブ。

easing.amplitude バウンスおよび弾性カーブ（Easing.InBounce 、Easing.OutBounce 、Easing.InOutBounce 、Easing.OutInBounce 、Easing.InElastic 、Easing.OutElastic 、Easing.InOutElastic 、またはEasing.OutInElastic のタイプのカーブ）にのみ適用されます。

easing.overshoot これは、easing.type が次のいずれかである場合にのみ適用されます：Easing.InBack 、Easing.OutBack 、Easing.InOutBack 、またはEasing.OutInBack 。

easing.period は、easing.type がEasing.InElastic 、Easing.OutElastic 、Easing.InOutElastic 、またはEasing.OutInElastic の場合にのみ適用されます。

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

さまざまなイージング設定のデモについては、「イージング曲線」を参照してください。

exclude : list<QtObject> [read-only]

このプロパティは、このアニメーションの影響を受けない項目を指定します。

「PropertyAnimation::targets」も参照してください 。

from : variant

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

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

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

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

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

は、

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

単数形は若干最適化されているため、アニメーション化するターゲットやプロパティが1つだけの場合は、それらを使用するようにしてください。

targets プロパティを使用すると、複数のターゲットを設定できます。たとえば、次のコードはitemA とitemB の両方のx プロパティをアニメーション化します：

NumberAnimation { targets: [itemA, itemB]; 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
            }
            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 には、アニメーションの対象となるプロパティ名をカンマ区切りで指定します。

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

to : variant

このプロパティには、アニメーションの終了値が格納されます。

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

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