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

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

  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 プロパティを500ミリ秒かけて、現在の幅から30までアニメートする：

  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 クイック入門の「アニメーションとトランジション」を参照してください。

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

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

Qt 6.4 以降、トップレベル・アニメーションの実行中に、from 、to 、duration 、easing のプロパティを設定することができます。アニメーションは、次のループで変更を考慮します。

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

プロパティの説明

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

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

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

easing group
easing.amplitude : real
easing.bezierCurve : list<real>
easing.overshoot : real
easing.period : real
easing.type : enumeration

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

イージングカーブを指定するには、少なくともタイプを指定する必要があります。いくつかのカーブでは、振幅、周期、オーバーシュートも指定できます (詳細は表の後で説明します)。デフォルトのイージングカーブは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	二次関数(t^2)の緩和曲線：途中まで加速、その後減速。
Easing.OutInQuad	次関数(t^2)の緩和曲線：途中まで減速、その後加速。
Easing.InCubic	次関数(t^3)のイージングカーブ：速度ゼロからの加速。
Easing.OutCubic	次関数(t^3)の緩和曲線：速度ゼロから減速する。
Easing.InOutCubic	次関数(t^3)のイージングカーブ：途中まで加速、その後減速。
Easing.OutInCubic	次関数(t^3)の緩和曲線：途中まで減速、その後加速。
Easing.InQuart	次関数(t^4)の緩和曲線：速度ゼロからの加速。
Easing.OutQuart	次関数(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 が: の場合のみ適用されます。このプロパティは、0,0から1,1までの曲線を定義する3点のグループ - control1、control2、end point: [cx1, cy1, cx2, cy2, endx, endy, ...] - を含むlist<real>です。最後の点は1,1でなければならない。Easing.BezierSpline

異なるイージング設定のデモについては、イージングカーブを参照してください。