QML 之过渡

过渡

过渡是指界面中元素从一个状态变换到另一个状态时的平滑过程。它让界面显得更加自然和流畅。例如，一个按钮从灰色变为绿色，一个图形从一个位置移动到另一个位置，或者透明度逐渐变化。这些视觉效果让用户体验更舒适。

在 QML 中，过渡是由 Transition 元素定义的。通过为组件的 transitions 属性添加 Transition，我们可以指定在状态切换时使用的动画效果。Transition 通常会定义开始状态（from）和结束状态（to），并包含一系列动画（animations），例如 NumberAnimation、ColorAnimation 等。

以下是几个简单的例子，逐步展示如何使用过渡效果。

示例 1：透明度渐变

在这个例子中，我们让一个矩形在可见和隐藏状态之间切换时，透明度逐渐变化，而不是瞬间跳变。

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 200
    height: 200
    color: "lightgray"

    Rectangle {
        id: rectangle
        width: 100
        height: 100
        anchors.centerIn: parent
        color: "blue"
        state: "visibleState"

        states: [
            State { name: "visibleState"; PropertyChanges { target: rectangle; opacity: 1 } },
            State { name: "hiddenState"; PropertyChanges { target: rectangle; opacity: 0 } }
        ]

        transitions: Transition {
            from: "*"
            to: "*"
            NumberAnimation { properties: "opacity"; duration: 1000 }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rectangle.state = rectangle.state === "visibleState" ? "hiddenState" : "visibleState";
        }
    }
}

功能介绍：

1. 定义了两个状态：
   • visibleState：矩形完全可见（opacity: 1）。
   • hiddenState：矩形完全隐藏（opacity: 0）。
2. 添加了一个 Transition，通过 NumberAnimation 实现透明度的平滑变化，持续时间为 1000 毫秒。

示例 2：颜色渐变

为一个矩形添加过渡效果，当点击切换时，矩形的颜色会平滑地变化。

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 300
    height: 200
    color: "white"

    Rectangle {
        id: rectangle
        width: 100
        height: 100
        anchors.centerIn: parent
        color: "blue"
        state: "normal"

        states: [
            State { name: "normal"; PropertyChanges { target: rectangle; color: "blue" } },
            State { name: "highlighted"; PropertyChanges { target: rectangle; color: "red" } }
        ]

        transitions: Transition {
            from: "*"
            to: "*"
            ColorAnimation { properties: "color"; duration: 800 }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rectangle.state = rectangle.state === "normal" ? "highlighted" : "normal";
        }
    }
}

功能介绍：

1. 定义了两种状态：
   • normal：矩形为蓝色。
   • highlighted：矩形为红色。
2. 添加了 ColorAnimation，实现颜色的平滑过渡，持续时间为 800 毫秒。

示例 3：大小变化

在这个例子中，我们实现了矩形在不同状态下大小的平滑变化。

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 300
    height: 200
    color: "white"

    Rectangle {
        id: rectangle
        width: 100
        height: 100
        anchors.centerIn: parent
        color: "blue"
        state: "small"

        states: [
            State { name: "small"; PropertyChanges { target: rectangle; scale: 1 } },
            State { name: "large"; PropertyChanges { target: rectangle; scale: 2 } }
        ]

        transitions: Transition {
            from: "*"
            to: "*"
            ScaleAnimation { duration: 500 }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rectangle.state = rectangle.state === "small" ? "large" : "small";
        }
    }
}

功能介绍：

1. 定义了两个状态：
   • small：矩形为正常大小。
   • large：矩形放大 2 倍。
2. 使用 ScaleAnimation 实现大小变化的平滑过渡，持续时间为 500 毫秒。

示例 4：位置移动

为一个矩形添加位置的平滑移动效果。

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 400
    height: 200
    color: "white"

    Rectangle {
        id: rectangle
        width: 50
        height: 50
        color: "blue"
        state: "left"
        x: 50
        y: 75

        states: [
            State { name: "left"; PropertyChanges { target: rectangle; x: 50 } },
            State { name: "right"; PropertyChanges { target: rectangle; x: 300 } }
        ]

        transitions: Transition {
            from: "*"
            to: "*"
            NumberAnimation { properties: "x"; duration: 700 }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rectangle.state = rectangle.state === "left" ? "right" : "left";
        }
    }
}

功能介绍：

1. 定义了两个状态：
   • left：矩形在左侧（x: 50）。
   • right：矩形移动到右侧（x: 300）。
2. 使用 NumberAnimation 让矩形在左右两侧之间平滑移动，持续时间为 700 毫秒。

总结

过渡是 QML 中实现平滑视觉效果的重要工具。通过 Transition 和多种动画（如 NumberAnimation、ColorAnimation、ScaleAnimation），我们可以轻松地为元素的状态切换增加动态效果。这些效果不仅让界面更加生动，还能提升用户的操作体验。无论是透明度渐变、颜色变化，还是更复杂的位置移动和大小调整，都可以通过简单的 QML 代码实现。