Roson的Qt之旅#38 QML Type之Transition

阳光穿透心脏的1/2处 2022-09-14 09:26 115阅读 0赞

# 1.数据成员概览 #

animations : list<Animation>
    enabled : bool
    from : string
    reversible : bool
    running : bool
    to : string

# 2.详细描述 #

Transition定义了当状态发生变化时应用的动画。  
例如，下面的矩形有两种状态:默认状态和添加的“移动”状态。在“移动”状态下，矩形的位置变为(50,50)。添加的过渡指定当矩形在默认和“移动”状态之间改变时，任何对x和y属性的改变都应该是动画的，使用easinginoutquad。

import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
             id: rect
             width: 100; height: 100
             color: "red"
    
             MouseArea {
                 id: mouseArea
                 anchors.fill: parent
             }
    
             states: State {
                 name: "moved"; when: mouseArea.pressed
                 PropertyChanges { target: rect; x: 50; y: 50 }
             }
    
             transitions: Transition {
                 NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
             }
         }
    
    }

![7a784a491ad146cbb45c0863c888aa16.gif][]

注意，这个示例不需要NumberAnimation的to和from值。为了方便起见，这些属性会自动设置为状态改变前后的x和y值;from值由x和y的当前值提供，to值由PropertyChanges对象提供。如果您愿意，您可以以任何方式提供to和from值来覆盖默认值。  
默认情况下，Transition的动画应用于父项目中的任何状态变化。可以设置from到to值的过渡，以限制动画只适用于从一个特定的状态更改到另一个。  
要定义多个转换，指定Item::transitions转换为列表:

transitions: [
        Transition {
            from: "stop"; to: "go"
            PropertyAnimation { target: stopLight
                                properties: "color"; duration: 1000 }
        },
        Transition {
            from: "go"; to: "stop"
            PropertyAnimation { target: goLight
                                properties: "color"; duration: 1000 }
        } ]

如果指定了多个Transition，那么对于任何特定的状态更改，只会应用一个(最佳匹配的)Transition。在上面的示例中，当更改为state1时，将使用第一个转换，而不是更通用的第二个转换。  
如果状态更改具有与行为匹配相同属性的Transition，则Transition动画将覆盖该状态更改的Behavior。  
参见Qt Quick中的动画和过渡，状态示例，Qt Quick States和Qt QML。

# 3.数据成员详细介绍 #

## 3.1 \[default\] animations : list<Animation> ##

此属性保存了要为此转换运行的动画的列表。

transitions: Transition {
          PropertyAnimation { duration: 3000 }
          ColorAnimation { duration: 3000 }
      }

注意：PropertyAnimation和ColorAnimation都继承于Animation.

顶级动画是并行运行的。要按顺序运行它们，请在SequentialAnimation中定义它们:

transitions: Transition {
          SequentialAnimation {
              PropertyAnimation { property: "x"; duration: 1000 }
              ColorAnimation { duration: 1000 }
          }
      }

## 3.2 enabled : bool ##

此属性用于保存从一个状态移动到另一个状态时是否运行Transition。

默认情况下，Transition是启用的。

注意，在某些情况下，禁用一个Transition可能会导致在其位置上使用另一个Transition。 在下面的例子中，虽然第一个Transition被设置为animate changes from "state1" to "state2"，但是通过将enabled设置为false，这个Transition已经被禁用，所以任何这样的状态更改实际上将由第二个Transition来动画。

Item {
          states: [
              State { name: "state1" },
              State { name: "state2" }
          ]
          transitions: [
              Transition { from: "state1"; to: "state2"; enabled: false },
              Transition {
                  // ...
              }
          ]
      }

## 3.3 from : string ##

这些属性指示触发转换的状态更改。  
这些属性的默认值是“\*”(即任何状态)。  
例如，下面的过渡没有设置to和from属性，所以当在两种状态之间改变时(即当鼠标被按下和释放时)，动画总是被应用。

Rectangle {
          id: rect
          width: 100; height: 100
          color: "red"
    
          MouseArea { id: mouseArea; anchors.fill: parent }
    
          states: State {
              name: "brighter"; when: mouseArea.pressed
              PropertyChanges { target: rect; color: "yellow" }
          }
    
          transitions: Transition {
              ColorAnimation { duration: 1000 }
          }
      }

如果转换被改成这样:

transitions: Transition {
          to: "brighter"
          ColorAnimation { duration: 1000 }
      }

动画只会在从默认状态切换到“brighter”状态(即鼠标被按下而不是释放时)时应用。  
可以使用逗号分隔的字符串设置多个往返值。  
参见reversible。

## 3.4 reversible : bool ##

此属性保存当触发此转换的条件被逆转时是否应自动逆转此转换。  
默认值为false。  
默认情况下，转换并行运行，如果未设置from和to状态，则将转换应用于所有状态更改。在这种情况下，当状态更改被逆转时，转换将自动应用，并且不需要设置此属性来逆转转换。  
但是，如果使用了SequentialAnimation，或者设置了from或to属性，则需要设置此属性以在恢复状态更改时逆转转换。例如，当鼠标被按下时，下面的过渡将应用一个顺序动画，而当鼠标被释放时，则将动画顺序反转:

Rectangle {
          id: rect
          width: 100; height: 100
          color: "red"
    
          MouseArea { id: mouseArea; anchors.fill: parent }
    
          states: State {
              name: "brighter"
              when: mouseArea.pressed
              PropertyChanges { target: rect; color: "yellow"; x: 50 }
          }
    
          transitions: Transition {
              SequentialAnimation {
                  PropertyAnimation { property: "x"; duration: 1000 }
                  ColorAnimation { duration: 1000 }
              }
          }
      }

如果转换没有设置to和reversible的值，那么在鼠标释放时，转换将在ColorAnimation之前执行PropertyAnimation，而不是反转序列。

##    3.5 running : bool ##

此属性用于确定转换当前是否正在运行。  
此属性为只读。

## 3.6 to : string ##

如果转换被改成这样:

transitions: Transition {
          to: "brighter"
          ColorAnimation { duration: 1000 }
      }

动画只会在从默认状态切换到“亮”状态(即鼠标被按下而不是释放时)时应用。  
可以使用逗号分隔的字符串设置多个往返值。  
参见reversible。

[7a784a491ad146cbb45c0863c888aa16.gif]: /images/20220828/67aa4f225d8a4ab88b57a01926ae7d71.png