属性动画 QML 类型

动画化属性值的变化。 更多...

• 包括继承成员在内的所有成员列表

属性

• duration : int
• 缓和
  • easing.amplitude : real
  • easing.bezierCurve : list
  • easing.overshoot : real
  • easing.period : real
  • easing.type : 枚举
• exclude : list
• from : variant
• properties : 字符串
• property : 字符串
• target : QtObject
• targets : list
• to : variant

详细描述

PropertyAnimation 提供了一种动画化属性值变化的方法。

它可以以多种方式定义动画

• 在一个过渡中

  例如，使用一个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 }
      }
  }

• 在一个行为中

  例如，动画化矩形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属性，在500ms内从其当前宽度变为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示例 - 动画。

属性文档

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.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 曲线：加速到一半，然后减速。
Easing.OutInQuad	二次（t^2）函数的 easing 曲线：减速到一半，然后加速。
Easing.InCubic	三次（t^3）函数的 easing 曲线：从零速度开始加速。
Easing.OutCubic	三次（t^3）函数的 easing 曲线：减速到零速度。
Easing.InOutCubic	三次（t^3）函数的 easing 曲线：加速到一半，然后减速。
Easing.OutInCubic	三次（t^3）函数的 easing 曲线：减速到一半，然后加速。
Easing.InQuart	四次（t^4）函数的 easing 曲线：从零速度开始加速。
Easing.OutQuart	四次（t^4）函数的 easing 曲线：减速到零速度。
Easing.InOutQuart	四次（t^4）函数的 easing 曲线：加速到一半，然后减速。
Easing.OutInQuart	四次（t^4）函数的 easing 曲线：减速到一半，然后加速。
Easing.InQuint	五次（t^5）函数的 easing 曲线：从零速度开始加速。
Easing.OutQuint	五次（t^5）函数的 easing 曲线：减速到零速度。
Easing.InOutQuint	五次（t^5）函数的 easing 曲线：加速到一半，然后减速。
Easing.OutInQuint	五次（t^5）函数的 easing 曲线：减速到一半，然后加速。
Easing.InSine	正弦（sin(t)）函数的 easing 曲线：从零速度开始加速。
Easing.OutSine	正弦（sin(t)）函数的 easing 曲线：减速到零速度。
Easing.InOutSine	正弦（sin(t)）函数的 easing 曲线：加速到一半，然后减速。
Easing.OutInSine	正弦（sin(t)）函数的 easing 曲线：减速到一半，然后加速。
Easing.InExpo	指数（2^t）函数的 easing 曲线：从零速度开始加速。
Easing.OutExpo	指数（2^t）函数的 easing 曲线：减速到零速度。
Easing.InOutExpo	指数（2^t）函数的 easing 曲线：加速到一半，然后减速。
Easing.OutInExpo	指数（2^t）函数的 easing 曲线：减速到一半，然后加速。
Easing.InCirc	圆形（sqrt(1-t^2)）函数的 easing 曲线：从零速度开始加速。
Easing.OutCirc	圆形（sqrt(1-t^2)）函数的 easing 曲线：减速到零速度。
Easing.InOutCirc	圆形（sqrt(1-t^2)）函数的 easing 曲线：加速到一半，然后减速。
Easing.OutInCirc	圆形（sqrt(1-t^2)）函数的 easing 曲线：减速到一半，然后加速。
Easing.InElastic	弹性（指数衰减正弦波）函数的 easing 曲线：从零速度开始加速。 峰值幅度可以通过 amplitude 参数设置，而衰减的周期通过 period 参数设置。
Easing.OutElastic	弹性（指数衰减正弦波）函数的 easing 曲线：减速到零速度。 峰值幅度可以通过 amplitude 参数设置，而衰减的周期通过 period 参数设置。
Easing.InOutElastic	弹性（指数衰减正弦波）函数的 easing 曲线：加速到一半，然后减速。
Easing.OutInElastic	弹性（指数衰减正弦波）函数的 easing 曲线：减速到一半，然后加速。
Easing.InBack	回弹（过冲三次函数：(s+1)*t^3 - s*t^2）的 easing 入：从零速度开始加速。
Easing.OutBack	回弹（过冲三次函数：(s+1)*t^3 - s*t^2）的 easing 出：减速到零速度。
Easing.InOutBack	回弹（过冲三次函数：(s+1)*t^3 - s*t^2）的 easing 入/出：加速到一半，然后减速。
缓和_outInBack	用于背部的缓和曲线（超出去的立方缓和：(s+1)*t^3 - s*t^2）缓和出/入：减速直到一半，然后加速。
缓和_InBounce	用于弹跳的缓和曲线（指数衰减的抛物线弹跳）函数：从零速度加速。
缓和_OutBounce	用于弹跳的缓和曲线（指数衰减的抛物线弹跳）函数：减速到零速度。
缓和_InOutBounce	用于弹跳的缓和曲线（指数衰减的抛物线弹跳）函数缓和入/出：加速直到一半，然后减速。
缓和_OutInBounce	用于弹跳的缓和曲线（指数衰减的抛物线弹跳）函数缓和出/入：减速直到一半，然后加速。
缓和_BezierSpline	由缓和.bezierCurve属性定义的自定义缓和曲线。

缓和.振幅仅适用于弹跳和弹性曲线（类型为缓和_InBounce，缓和_OutBounce，缓和_InOutBounce，缓和_OutInBounce，缓和_InElastic，缓和_OutElastic，缓和_InOutElastic或缓和_OutInElastic）。

缓和.越出仅适用于缓和.类型是：缓和_InBack，缓和_OutBack，缓和_InOutBack或缓和_OutInBack。

缓和.周期仅适用于缓和.type是：缓和_InElastic，缓和_OutElastic，缓和_InOutElastic或缓和_OutInElastic。

缓和.bezierCurve仅适用于缓和.type是：缓和_BezierSpline。此属性是一个包含定义从0,0到1,1的曲线的三个点的实数列表：控制点1，控制点2，终止点：[cx1, cy1, cx2, cy2, endx, endy，...]。最后一个点必须是1,1。

请参见缓和曲线，以了解不同缓和设置的演示。