Roson的Qt之旅#46 QML属性动画PropertyAnimation

Dear 丶 2022-09-14 09:47 180阅读 0赞

# 1.继承关系 #

父类：Animation

子类:ColorAnimation, NumberAnimation, RotationAnimation, and Vector3dAnimation

# 2.综述 #

PropertyAnimation提供了一种对属性值进行动画更改的方法。  
它可以用多种方式来定义动画:

## 2.1 In a 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 }
          }
      }

##    2.2 In a Behavior ##

例如，动画对矩形的x属性的所有更改:

Rectangle {
          width: 100; height: 100
          color: "red"
    
          Behavior on x { PropertyAnimation {} }
    
          MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
      }

##    2.3 As a property value source ##

例如，重复动画矩形的x属性:

Rectangle {
          width: 100; height: 100
          color: "red"
    
          SequentialAnimation on x {
              loops: Animation.Infinite
              PropertyAnimation { to: 50 }
              PropertyAnimation { to: 0 }
          }
      }

##    2.4 In a signal handler ##

例如，在单击时淡出object:

MouseArea {
          anchors.fill: theObject
          onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
      }

##    2.5 Standalone ##

例如，动画矩形的宽度属性超过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类型。 这包括用于控制动画的附加属性和方法。

更多信息请查阅 Animation and Transitions in Qt Quick and Qt Quick Examples - Animation.

# 3.数据成员 #

##    duration : int ##

此属性保存动画的持续时间，以毫秒为单位。  
 缺省值是250。

##  ##

## easing group ##

easing.type : enumeration  
easing.amplitude : real  
easing.overshoot : real  
easing.period : real  
easing.bezierCurve : list<real>

指定用于动画的缓和曲线  
要指定缓和曲线，至少需要指定类型。对于一些曲线，你也可以指定振幅，周期和/或超调(更多细节在表格后提供)。默认的缓动曲线是Easing.Linear.

PropertyAnimation { properties: "y";
        easing.type: Easing.InOutElastic;
        easing.amplitude: 2.0;
        easing.period: 1.5 }

Available types are:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16][]

Easing.Bezier  
通过easing.bezierCurve属性自定义缓动曲线.

easing.amplitude is only applicable for bounce and elastic curves (curves of type Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic or Easing.OutInElastic).

easing.overshoot is only applicable if easing.type is: Easing.InBack, Easing.OutBack, Easing.InOutBack or Easing.OutInBack.

easing.period is only applicable if easing.type is: Easing.InElastic, Easing.OutElastic, Easing.InOutElastic or Easing.OutInElastic.

easing.bezierCurve is only applicable if easing.type is: Easing.Bezier. This property is a list<real> containing groups of three points defining a curve from 0,0 to 1,1 - control1, control2, end point: \[cx1, cy1, cx2, cy2, endx, endy, ...\]. The last point must be 1,1.

See the Easing Curves for a demonstration of the different easing settings.

##    exclude : list<Object> ##

此属性保存不受此动画影响的项。    
更多信息请查阅PropertyAnimation::targets.

##  ##

## from : variant ##

此属性保存动画的起始值。

如果PropertyAnimation是在Transition或Behavior中定义的，则该值默认为Transition的开始状态中定义的值，或行为触发时属性的当前值。  
更多信息请查阅Animation and Transitions in Qt Quick.

##    properties : string ##

这些属性用于确定哪些属性应该被动画化。 单数和复数形式在功能上是相同的：

NumberAnimation { target: theItem; property: "x"; to: 500 }

类似的还有：

NumberAnimation { targets: theItem; properties: "x"; to: 500 }

单一形式稍微优化了一下，所以如果你只有一个目标/属性动画，你应该尝试使用它们。  
targets属性允许设置多个目标。例如，这会动画itemema和itemB的x属性:

NumberAnimation \{ targets: \[itemA, itemB\]; properties: "x"; to: 500 \}

在许多情况下，这些属性不需要显式指定，因为它们可以从动画框架中推断出来:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

如上例所示，属性被指定为以逗号分隔的属性名称字符串。

更多信息请查阅exclude and Animation and Transitions in Qt Quick.

##    property : string ##

这些属性用于确定哪些属性应该被动画化。 单数和复数形式在功能上是相同的：

NumberAnimation { target: theItem; property: "x"; to: 500 }

类似的还有：

NumberAnimation { targets: theItem; properties: "x"; to: 500 }

NumberAnimation \{ targets: \[itemA, itemB\]; properties: "x"; to: 500 \}

在许多情况下，这些属性不需要显式指定，因为它们可以从动画框架中推断出来:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

如上例所示，属性被指定为以逗号分隔的属性名称字符串。

更多信息请查阅exclude and Animation and Transitions in Qt Quick.

##    target : Object ##

这些属性用于确定哪些属性应该被动画化。 单数和复数形式在功能上是相同的：

NumberAnimation { target: theItem; property: "x"; to: 500 }

类似的还有：

NumberAnimation { targets: theItem; properties: "x"; to: 500 }

NumberAnimation \{ targets: \[itemA, itemB\]; properties: "x"; to: 500 \}

在许多情况下，这些属性不需要显式指定，因为它们可以从动画框架中推断出来:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

如上例所示，属性被指定为以逗号分隔的属性名称字符串。

更多信息请查阅exclude and Animation and Transitions in Qt Quick.

##    targets : list<Object> ##

这些属性用于确定哪些属性应该被动画化。 单数和复数形式在功能上是相同的：

NumberAnimation { target: theItem; property: "x"; to: 500 }

类似的还有：

NumberAnimation { targets: theItem; properties: "x"; to: 500 }

NumberAnimation \{ targets: \[itemA, itemB\]; properties: "x"; to: 500 \}

在许多情况下，这些属性不需要显式指定，因为它们可以从动画框架中推断出来:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

更多信息请查阅 exclude and Animation and Transitions in Qt Quick.

##    to : variant ##

根据动画的使用方式，通常使用的属性集会有所不同。 有关更多信息，请参阅单独的属性文档，以及Qt Quick中的动画和过渡介绍。  
 注意PropertyAnimation继承了抽象的Animation类型。 这包括用于控制动画的附加属性和方法。  
更多信息请查阅Animation and Transitions in Qt Quick.

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9175376fc0484d70934488678546f78f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/951bba66239b447f8f505412247f7414.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/8735e48c458e439da94b0ff8420e0b8c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/a1b2674f9ebf416e8b8f80cd18a82908.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/621b2cbb5b0b4d0ab8387f805cb34325.png