首页 > 其他分享> > Roson讲Qt#38 QML Type之Transition

Roson讲Qt#38 QML Type之Transition

2021-10-03 19:58:47 作者：互联网

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 }
         }
     }

}

注意，这个示例不需要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

  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 }
  }

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

标签：状态,38,Qt,动画,Transition,duration,transitions,属性
来源： https://blog.csdn.net/jolin678/article/details/120597416