Back to Qt.io
Contact Us Blog Download Qt

Transition QML Type

定义在状态改变时发生的动画转换。更多

Import Statement: import QtQuick

属性

详细说明

转换（Transition）定义了当State 发生变化时要应用的动画。

例如，下面的Rectangle 有两种状态：默认状态和添加的 "移动 "状态。在 "移动 "状态下，矩形的位置变为 (50，50)。添加的过渡指定，当矩形在默认状态和 "移动 "状态之间变化时，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 值来覆盖默认值。

默认情况下，父项的任何状态变化都会应用过渡动画。可以设置过渡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" 以外的状态，将执行第三个转换，即图标将移动到起点。

如果一个状态变化有一个与Behavior 相同属性的过渡，则过渡动画会覆盖该状态变化的Behavior 。

另请参阅 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 }
}

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

使用逗号分隔的字符串可以设置多个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

该属性用于保存从from 状态转到to 状态时是否运行过渡动画。

默认情况下，转场动画是启用的。

请注意，在某些情况下，禁用转换可能会导致使用其他转换来代替它。在下面的示例中，虽然已将第一个转换设置为从 "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 值，那么当鼠标释放时，过渡将在ColorAnimation 之前播放PropertyAnimation ，而不是颠倒顺序。


running : bool [read-only]

此属性用于判断过渡效果是否正在运行。

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


© 2025 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.