转换QML类型

定义在状态变化时发生的动画转换。更多信息...

导入语句	import QtQuick

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

属性

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

详细描述

转换定义了当发生状态变化时应用的动画。

例如，以下 Rectangle 有两个状态：默认状态和新增的 "moved" 状态。在 "moved" 状态下，矩形的坐标变为 (50, 50)。新增的转换指定当矩形在默认和 "moved" 状态之间变化时，应对 x 和 y 属性的变化进行动画处理，使用 Easing.InOutQuad。

import QtQuick

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

注意示例中没有为 to 和 from 提供值。作为一个便利，在状态改变之前和之后自动将这些属性设置为 x 和 y 的当前值；from 的值由当前的 x 和 y 值提供，而 to 的值则由 PropertyChanges 对象提供。如果你愿意，可以提供 to 和 from 的值以覆盖默认值。

默认情况下，转换的动画应用于父项目中的任何状态改变。转换的 from 和 to 值可以被设置以限制动画只在从一个特定状态变到另一个状态时应用。

转换内的顶层动画是并行运行的。要按顺序运行，请在 SequentialAnimation 中定义它们。

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

要定义多个转换，请将 Item::transitions 作为列表指定

    transitions: [
        Transition {
            from: "*"; to: "middleRight"
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 2000;
            }
        },
        Transition {
            from: "*"; to: "bottomLeft";
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 200;
            }
        },
        //If any other rectangle is clicked, the icon will return
        //to the start position at a slow speed and bounce.
        Transition {
            from: "*"; to: "*";
            NumberAnimation {
                easing.type: Easing.OutBounce;
                properties: "x,y";
                duration: 4000;
            }
        }
    ]

如果指定了多个转换，则只会对任何特定状态变化应用一个（最佳匹配）转换。在上面的示例中，如果矩形进入的不是“middleRight”或“bottomLeft”状态，则将执行第三个转换，即图标将移动到起始点。

如果状态变化的转换与行为的同一属性匹配，则转换动画将覆盖该状态变化的行为。

另请参阅 Qt Quick 中的动画和转换、状态示例、Qt Quick 状态以及Qt Qml。

属性文档

from : string

to : 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”状态时应用（即鼠标按下时，但不是释放时）。

可以通过使用逗号分隔的字符串设置多个 to 和 from 值。

另请参阅 reversible。

animations : list<Animation> [default]

此属性包含要为此转换运行的动画列表。

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

顶层动画并行运行。要顺序运行它们，请在SequentialAnimation内定义它们。

transitions: Transition {
    to: "brighter"
    reversible: true
    SequentialAnimation {
        PropertyAnimation { property: "x"; duration: 1000 }
        ColorAnimation { duration: 1000 }
    }
}

enabled : bool

此属性指明 Transition 是否在从 from 状态移动到 to 状态时运行。

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

请注意，在某些情况下，禁用转换可能会使用替代转换。在下面的例子中，尽管第一个转换已被设为从“state1”到“state2”变化动画，但通过将 enabled 设置为 false 已禁用此转换，因此此类任何状态变化实际上将由第二个转换进行动画处理。

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

reversible : bool

此属性指明转换是否应该自动逆向当触发此转换的条件被逆转时。

默认值是 false。

默认情况下，转换并行运行，并且如果未设置 from 和 to 状态，则应用于所有状态变化。在这种情况下，当状态变化逆转时，转换会自动应用，并且无需设置此属性以逆转转换。

但是，如果使用了 SequentialAnimation，或者已设置了 from 或 to 属性，则需要将此属性设置为在状态变化逆转时逆转转换。例如，以下转换在鼠标按下时应用顺序动画，并在鼠标释放时逆转动画的顺序

Rectangle {
    id: rect
    width: 100; height: 100
    color: "steelblue"

    TapHandler { id: tapHandler }

    states: State {
        name: "brighter"
        when: tapHandler.pressed
        PropertyChanges { target: rect; color: "lightsteelblue"; x: 50 }
    }

    transitions: Transition {
        to: "brighter"
        reversible: true
        SequentialAnimation {
            PropertyAnimation { property: "x"; duration: 1000 }
            ColorAnimation { duration: 1000 }
        }
    }
}

如果转换没有设置 to 和 reversible 值，那么在鼠标释放时，转换将播放属性动画，而不是在逆序之前播放颜色动画。

running : bool [只读]

此属性表示转换当前是否正在运行。

注意：与 Animation::running 不同，此属性为只读，不能用于控制转换。