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 }
  }
• 独立

  例如，在 500ms 内将rect 的width 属性从当前宽度调整为 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 Quick 中的动画和转换介绍。

请注意，PropertyAnimation 继承了抽象的Animation 类型。这包括控制动画的附加属性和方法。

修改运行中的动画

自 Qt XML 6.4 起，可以在顶层动画运行时设置from,to,duration, 和easing 属性。动画将在下一次循环中考虑这些更改。

另请参阅 Qt Quick和Qt Quick 示例 -动画中的动画和过渡。

属性文档

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	二次函数 (t^2) 的缓和曲线：从零开始加速。
Easing.OutQuad	二次函数（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	四次（t^4）函数的平缓曲线：加速到一半，然后减速。
Easing.OutInQuart	四次函数 (t^4) 的缓和曲线：减速至一半，然后加速。
Easing.InQuint	五次函数 (t^5) 的缓和曲线：从零加速。
Easing.OutQuint	五次函数 (t^5) 的缓和曲线：减速至零速。
Easing.InOutQuint	五次函数（t^5）的平缓曲线：加速到一半，然后减速。
Easing.OutInQuint	五次函数（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	弹性（指数衰减正弦波）函数的缓和曲线：从零加速。 可以用振幅参数设置峰值振幅，用周期参数设置衰减周期。
Easing.OutElastic	弹性（指数衰减正弦波）函数的缓和曲线：减速至零速。 峰值振幅可通过振幅参数设置，衰减周期可通过周期参数设置。
Easing.InOutElastic	弹性（指数衰减正弦波）函数的缓和曲线：加速到一半，然后减速。
Easing.OutInElastic	弹性（指数衰减正弦波）函数的缓和曲线：减速至一半，然后加速。
Easing.InBack	后退（过冲三次函数：(s+1)*t^3 - s*t^2）的缓和曲线：从零加速。
Easing.OutBack	后退的缓和曲线（过冲三次函数：(s+1)*t^3 - s*t^2）缓和退出：减速至零速度。
Easing.InOutBack	后退的缓和曲线（过冲三次函数：(s+1)*t^3 - s*t^2）缓入/缓出：加速到一半，然后减速。
Easing.OutInBack	回弹的缓和曲线（过冲三次函数缓和：(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 为： 时才适用。此属性是一个 list<real>（列表<real>），包含从 0,0 到 1,1 定义曲线的三个点 - control1、control2、end point：[cx1、cy1、cx2、cy2、endx、endy、...]。最后一点必须是 1,1。Easing.BezierSpline

有关不同缓和设置的演示，请参阅缓和曲线。