QT QML 练习2 - 技术栈

这段代码使用 QtQuick 实现了一个简单的 GUI 界面，主要功能是展示一个背景图像、一个风车杆和一个可以旋转的风车。点击风车时，风车可以开始或者停止旋转。以下是对代码的详细介绍。

代码结构及实现细节

导入 QtQuick
qml 复制代码
```
import QtQuick
```
- 该语句引入了 QtQuick 模块，用于创建图形用户界面 (GUI)。
窗口 (Window)
qml 复制代码
```
Window {
    width: 500
    height: 300
    visible: true
    title: qsTr("小风车转转呀转")
```
- Window 是主窗口组件，设置了宽度为 500 像素，高度为 300 像素。
- visible: true 表示窗口可见。
- title 为 "小风车转转呀转"，显示在窗口标题栏中。

背景图片 (background)

qml 复制代码

Image {
    anchors.fill: parent
    id: background
    source: "./background.png"
}
- 创建一个 `Image` 元素作为背景图。
- `anchors.fill: parent` 表示背景图片填满窗口。
- `source` 属性指向图片路径 `"./background.png"`。

风车杆 (pole)
qml 复制代码
```
Image {
    id: pole
    source: "./pole.png"
    width: background.width * 0.02
    height: background.height * 0.3
    anchors.bottom: parent.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}
```
- Image 元素用于表示风车杆。
- 设置 width 和 height 属性，使用背景图的宽高比例来设置风车杆的尺寸，确保杆子随着窗口变化而保持比例一致。
- anchors.bottom: parent.bottom 将风车杆的底部对齐到窗口底部。
- anchors.horizontalCenter: parent.horizontalCenter 使风车杆在水平上与窗口居中对齐。
风车 (pinwheel)
qml 复制代码
```
Image {
    id: pinwheel
    source: "./pinwheel.png"
    width: background.width * 0.16
    height: width
    anchors.bottom: pole.top
    anchors.horizontalCenter: pole.horizontalCenter
```
- 创建了一个 Image 元素用于表示风车。
- 使用背景宽度的 16% 设置风车的宽度，同时让 height 等于 width 保证风车为正方形。
- anchors.bottom: pole.top 使风车的位置位于风车杆的顶部，水平居中对齐风车杆。

状态控制 (states)

qml 复制代码

states: [
    State {
        name: "rotating"
        PropertyChanges {
            target: pinwheel
            rotation: 3600
        }
    },
    State {
        name: "stopped"
        PropertyChanges {
            target: pinwheel
            rotation: 0
        }
    }
]

定义了两个状态：rotating 和 stopped。
rotating 状态使风车旋转一定角度 (rotation: 3600)，从视觉效果上看是长时间旋转。
stopped 状态将风车的旋转角度设为 0，表示停止旋转。

鼠标交互 (MouseArea)
qml 复制代码
```
MouseArea {
    anchors.fill: parent
    onClicked: {
        if (pinwheel.state === "rotating") {
            pinwheel.state = "stopped";
        } else {
            pinwheel.state = "rotating";
        }
    }
}
```
- 使用 MouseArea 监听用户的点击事件。
- anchors.fill: parent 使鼠标区域覆盖整个风车图片区域。
- onClicked 事件处理函数，点击时检查风车的状态，如果是 rotating 状态则切换到 stopped，否则切换到 rotating。

状态变化时的动画 (transitions)

qml 复制代码

transitions: [
    Transition {
        from: "stopped"
        to: "rotating"
        SequentialAnimation {
            loops: Animation.Infinite
            PropertyAnimation {
                target: pinwheel
                property: "rotation"
                from: 0
                to: 360
                duration: 2000
                easing.type: Easing.Linear
            }
        }
    },
    Transition {
        from: "rotating"
        to: "stopped"
        PropertyAnimation {
            target: pinwheel
            property: "rotation"
            duration: 500
        }
    }
]

当风车状态从 stopped 切换到 rotating 时，使用 SequentialAnimation 实现无限循环的旋转效果。
loops: Animation.Infinite 表示动画无限循环，风车看起来会持续旋转。
PropertyAnimation 定义了风车的旋转属性动画，从 0 到 360 度，持续时间为 2000 毫秒。
easing.type: Easing.Linear 表示旋转过程为匀速。
从 rotating 到 stopped 切换时，使用一个简单的 PropertyAnimation 逐渐停止旋转。

代码的特点

图形动画及交互：
- 通过 MouseArea 处理鼠标点击，结合 State 和 Transition 控制风车的旋转和停止。
- 使用 SequentialAnimation 使风车在旋转状态时无限循环，提供生动的视觉效果。
状态管理：
- 使用 states 和 transitions 来管理风车的旋转和停止状态，使得动画逻辑清晰且易于控制。
动态调整布局：
- 使用相对布局的方式，根据背景的尺寸来设置风车和风车杆的大小。
- 通过这种相对布局，确保窗口调整大小时，界面布局也能相应调整。
平滑动画效果：
- 使用 PropertyAnimation 和 NumberAnimation 确保旋转角度变化时有平滑的过渡，不会突兀地跳转。

可改进的地方

性能优化：
- 无限旋转的动画可能对性能有一定影响，如果程序在低性能设备上运行，可以考虑使用更优化的动画方式。
用户体验：
- 可以增加更多的视觉反馈，比如风车启动和停止时的声音效果或视觉变化，让用户对操作有更明确的反馈。
布局兼容性：
- 可以使用更多 Layout 模块，例如 ColumnLayout 或 GridLayout，使界面布局更加精细，进一步适配各种屏幕尺寸。

总体来说，这段代码展示了一个具有基础交互和动画效果的小型图形界面应用。通过使用 QtQuick 的状态管理、动画过渡、以及相对布局，使得界面交互流畅且具有一定的美观性，非常适合作为学习 QML 和动画特性的入门示例。
功能：点击一下停止，点击一下一直旋转

c 复制代码

import QtQuick

Window {
    width: 500 /* background.width */
    height: 300 /* background.height */
    visible: true
    title: qsTr("小风车转转呀转")

    Image {
        anchors.fill: parent
        id: background
        source: "./background.png" // URL

        Image {
            id: pole
            source: "./pole.png"
            width: background.width * 0.02 // 使用背景的宽度的百分比来设置杆子的宽度
            height: background.height * 0.3 // 使用背景的高度的百分比来设置杆子的高度
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Image {
            id: pinwheel
            source: "./pinwheel.png"
            width: background.width * 0.16 // 使用背景的宽度的百分比来设置风车的宽度
            height: width // 确保风车保持正方形
            anchors.bottom: pole.top
            anchors.horizontalCenter: pole.horizontalCenter

            // 设置风车旋转的状态，"stopped" 和 "rotating"
            states: [
                State {
                    name: "rotating"
                    PropertyChanges {
                        target: pinwheel
                        rotation: 3600 // 大的值使得动画足够长，看起来是无限旋转
                    }
                },
                State {
                    name: "stopped"
                    PropertyChanges {
                        target: pinwheel
                        rotation: 0
                    }
                }
            ]

            // 点击时改变状态
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (pinwheel.state === "rotating") {
                        pinwheel.state = "stopped";
                    } else {
                        pinwheel.state = "rotating";
                    }
                }
            }

            // 在状态变化时应用动画
            transitions: [
                Transition {
                    from: "stopped"
                    to: "rotating"
                    SequentialAnimation {
                        loops: Animation.Infinite // 无限循环旋转
                        PropertyAnimation {
                            target: pinwheel
                            property: "rotation"
                            from: 0
                            to: 360
                            duration: 2000 // 每次旋转的持续时间（毫秒）
                            easing.type: Easing.Linear // 保持匀速旋转
                        }
                    }
                },
                Transition {
                    from: "rotating"
                    to: "stopped"
                    PropertyAnimation {
                        target: pinwheel
                        property: "rotation"
                        duration: 500
                    }
                }
            ]
        }
    }
}