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 属性在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 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	二次（t²）函数的缓入/缓出曲线：从零速度开始加速。
Easing.OutQuad	二次（t²）函数的缓入/缓出曲线：从零速度开始减速。
Easing.InOutQuad	二次（t²）函数的缓和曲线：加速至中途，然后减速。
Easing.OutInQuad	二次（t²）函数的缓动曲线：减速至行程一半，然后加速。
Easing.InCubic	三次（t³）函数的缓动曲线：从零速度开始加速。
Easing.OutCubic	三次（t³）函数的缓动曲线：减速至零速度。
Easing.InOutCubic	三次（t^3）函数的缓动曲线：加速至行程一半，然后减速。
Easing.OutInCubic	三次（t³）函数的缓入曲线：减速至中途，然后加速。
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 为：Easing.BezierSpline 时适用。该属性是一个 list<real>，包含定义从 0,0 到 1,1 曲线的三个点组——控制点 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 }

单数形式经过了轻微优化，因此若您仅需对单一目标/属性进行动画处理，建议优先使用它们。

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 的属性change的值。

另请参阅 Qt Quick 中的“动画和过渡”部分。