Back to Qt.io
Contact Us Blog Download Qt
本页内容

Transition QML Type

定义状态变化时触发的动画过渡效果。更多...

Import Statement: import QtQuick

属性

详细说明

过渡（Transition）定义了在State 发生变化时要应用的动画效果。

例如，以下Rectangle 有两个状态：默认状态和新增的“moved”状态。在“moved”状态下，矩形的位置变为(50, 50)。 添加的“Transition”指定，当矩形在默认状态和“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 }
    }
}

请注意，该示例无需为NumberAnimation 属性指定to 和from 的值。为方便起见，在状态切换前后，这些属性会自动设置为x 和y 的值；from 的值由x 和y 的当前值提供，而to 的值则由PropertyChanges 对象提供。若需覆盖默认值，您仍可自行提供to 和from 的值。

默认情况下，过渡（Transition）的动画会应用于父项的任何状态变化。可以通过设置过渡的 `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;
            }
        }
    ]

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

如果某个状态变化的过渡效果与Behavior 中的某个属性匹配，则该过渡效果的动画将覆盖该状态变化对应的Behavior 。

另请参阅 《Qt Quick 》中的“动画与过渡”、“状态”示例、Qt Quick 中的“状态”，以及 Qt Qml。

属性文档

animations : list<Animation> [default read-only]

该属性保存了此转场要执行的动画列表。

    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

该属性控制在从“from ”状态切换到“to ”状态时，是否执行该过渡效果。

默认情况下，过渡效果处于启用状态。

请注意，在某些情况下，禁用某个过渡可能会导致系统改用另一个过渡来代替。在下面的示例中，尽管第一个过渡已被设置为对从“state1”到“state2”的状态变化进行动画处理，但由于将enabled 设置为false ，该过渡已被禁用，因此任何此类状态变化实际上都将由第二个过渡来完成动画效果。

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

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

则动画仅会在从默认状态切换到“更亮”状态时应用（即按下鼠标时，但释放时不应用）。

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

另请参阅 reversible 。

reversible : bool

该属性控制当触发此过渡的条件发生逆转时，过渡是否应自动逆转。

默认值为 false。

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

但是，如果使用了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 的值，那么在鼠标释放时，该过渡效果会先播放PropertyAnimation 再播放ColorAnimation ，而不是反转播放顺序。

running : bool [read-only]

该属性用于指示过渡是否正在运行。

注意：与 Animation::running不同， 该属性为只读，无法用于控制过渡效果。

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.