属性动画 QML 类型

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

• 所有成员列表，包括继承成员

属性

• duration : int
• easing
  • easing.bezierCurve : list
  • easing.type : 枚举
• 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 }
      }
  }

• 独立使用

  例如，动画化矩形的 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 }
  }

根据动画的使用方式，通常使用的属性集会有所不同。有关更多信息，请参阅个别属性文档以及 动画和转换 简介。

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

参见 动画和转换.

属性文档

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.bezierCurve : 列表<real>
easing.type : 枚举

指定动画使用的缓和曲线

要指定缓和曲线，至少需要指定类型。默认缓和曲线是 Easing.Linear。

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

可用类型包括

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）函数的缓动曲线：减速直到 halfway，然后加速。
Easing.InCirc	圆形（sqrt(1-t^2)）函数的缓动曲线：从零速度开始加速。
Easing.OutCirc	圆形（sqrt(1-t^2)）函数的缓动曲线：减速到零速度。
Easing.InOutCirc	圆形（sqrt(1-t^2)）函数的缓动曲线：加速直到 halfway，然后减速。
Easing.OutInCirc	圆形（sqrt(1-t^2)）函数的缓动曲线：减速直到 halfway，然后加速。
Easing.InElastic	弹性（指数衰减正弦波）函数的缓动曲线：从零速度开始加速。它使用默认值，峰值振幅（1.0）和衰减周期（0.3）。
Easing.OutElastic	弹性（指数衰减正弦波）函数的缓动曲线：减速到零速度。它使用默认值，峰值振幅（1.0）和衰减周期（0.3）。
Easing.InOutElastic	弹性（指数衰减正弦波）函数的缓动曲线：加速直到 halfway，然后减速。
Easing.OutInElastic	弹性（指数衰减正弦波）函数的缓动曲线：减速直到 halfway，然后加速。
Easing.InBack	后（超出三次函数：s*t^3 - s*t^2）缓动进入：从零速度开始加速。它使用默认值超出量（s: 1.70158）。
Easing.OutBack	后（超出三次函数：s*t^3 - s*t^2）缓动退出：减速到零速度。它使用默认值超出量（s: 1.70158）。
Easing.InOutBack	后（超出三次函数：s*t^3 - s*t^2）缓动进出：加速直到 halfway，然后减速。它使用默认值超出量（s: 1.70158）。
Easing.OutInBack	后（超出三次缓动：s*t^3 - s*t^2）缓动出/入：减速直到 halfway，然后加速。它使用默认值超出量（s: 1.70158）。
Easing.InBounce	弹跳（指数衰减抛物线弹跳）函数的缓动曲线：从零速度开始加速。
Easing.OutBounce	弹跳（指数衰减抛物线弹跳）函数的缓动曲线：从零速度开始减速。
Easing.InOutBounce	弹跳（指数衰减抛物线弹跳）函数缓动进出：加速直到 halfway，然后减速。
Easing.OutInBounce	弹跳（指数衰减抛物线弹跳）函数缓动出/入：减速直到 halfway，然后加速。
Easing.BezierSpline	由 easing.bezierCurve 属性定义的自定义缓动曲线。

easing.bezierCurve 仅当 easing.type 是: Easing.BezierSpline 时适用。此属性是一个包含定义从 0,0 到 1,1 的曲线的三点组列表 <real> - 控制点1，控制点2，终点：[cx1, cy1, cx2, cy2, endx, endy, ...]。最后一个点必须是 1,1。

注意： 如果您设置了 easing.bezierCurve 但未指定 easing.type，则 qmltocpp 工具 将生成隐式地将 easing.type 设置为 Easing.BezierSpline 的代码。

在特定Qt许可证下可用。
了解更多。