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

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

  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 プロパティを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 }
  }

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

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

Animation と Transitionsも参照してください 。

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

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

easing group
easing.bezierCurve : list<real>
easing.type : enumeration

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

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

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

利用可能なタイプは次のとおりです：

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	弾性（指数関数的に減衰する正弦波）関数の緩和曲線：速度ゼロからの加速。ピーク振幅(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点のグループを含むリスト<real>です - control1, control2, end point: [cx1, cy1, cx2, cy2, endx, endy, ...]。最後の点は1,1でなければならない。

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

特定の Qt ライセンスの下で利用可能です。
詳細を確認してください。