C

QML 类型转换

定义状态变化时发生的动画。 更多...

导入声明import QtQuick
自Qt Quick Ultralite 1.0

属性

详细描述

Transition 定义了在 State 发生变化时应用的动画。

例如，以下 Rectangle 有两个状态：默认状态和 moved 状态。在 moved 状态中，矩形的位置变化为 (50, 50)，由 Transition 使用 Easing.InOutQuad 动画。这提供了视觉指示，表明矩形的状态已从默认状态变为 moved。

import QtQuick 2.15

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 对 NumberAnimation 的值。作为便利，这些属性自动设置为状态变化前后 x 和 y 的值；from 的值由当前的 x 和 y 值提供，而 to 的值由 PropertyChanges 对象提供。如果您愿意，也可以提供 to 和 from 的值来覆盖默认值。

默认情况下，Transition 的动画应用于父项中的任何状态变化。可以将 Transition 的 from 和 to 值设置为仅将动画应用于从一个特定状态切换到另一个状态。

要定义多个 Transition，将 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.
        Transition {
            from: "*"; to: "*";
            NumberAnimation {
                easing.type: Easing.OutExpo;
                properties: "x,y";
                duration: 4000;
            }
        }
    ]

如果指定了多个 Transition，则对任何特定的状态变化只应用一个（最佳匹配）Transition。在上面的示例中，如果 Rectangle 进入除 "middleRight" 或 "bottomLeft" 以外的状态，将执行第三个 Transition，意味着图标移动到起始点。

如果一个状态变化有与行为相同的属性匹配的转换，该转换动画将覆盖该状态变化中对应的行为。

另请参阅动画和转换，使用状态，以及Qt Quick Ultralite 重要概念 - 状态、转换和动画。

属性文档

from : 字符串

to : 字符串

这些属性指示触发转换的状态变化。

这些属性的默认值是 "*"（即任何状态）。

例如，以下转换未设置 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 值。


[默认] animations : 列表<动画>

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

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

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

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

在特定Qt许可证下提供。
了解更多信息。