QML -- Transform

​​https://doc.qt.io/qt-6/qml-qtquick-transform.html​​

可以为Item元素指定多种变换，这些变换包括：

• Rotation
• Scale
• Translate
• Matrix4x4

Ratation

​​https://doc.qt.io/qt-6/qml-qtquick-rotation.html​​

基本用法

Rectangle {
    width: 100; height: 100
    color: "blue"
    transform: Rotation { origin.x: 25; origin.y: 25; angle: 45}
}

3D效果的旋转：​​https://doc.qt.io/qt-6/qml-qtquick-rotation.html#details​​

配合动画

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Row {
        x: 10; y: 10
        spacing: 10
        Rectangle {
            width: 60
            height: 60
            color: "gray"
        }
        Rectangle {
            width: 60
            height: 60
            color: "gray"
            Text {
                anchors.centerIn: parent
                text: qsTr("text")
            }
            transform: [
                Rotation {
                    origin.x: 30;
                    origin.y: 30;
                    axis {
                        x: 0;
                        y: 1;
                        z: 0
                    }
                    NumberAnimation on angle {
                        running: true
                        loops: Animation.Infinite
                        from: 0
                        to: 360
                        duration: 1000
                    }
                }

            ]

        }
    }
}

第34行定义了一个动画，​​https://doc.qt.io/qt-6/qml-qtquick-propertyanimation.html#details​​，它只是对属性的变化应用了动画，放在哪里都可以，5种定义动画的方式任你选。

最重要的一点，axis指定了y轴为旋转轴。

Scale

​​https://doc.qt.io/qt-6/qml-qtquick-scale.html#details​​

这个变换真的是太简单了...需要注意的是，缩放值可以是负值(产生镜像的效果)

Translate

​​https://doc.qt.io/qt-6/qml-qtquick-translate.html#details​​

Martix4x4

​​https://doc.qt.io/qt-6/qml-qtquick-matrix4x4.html#details​​

根据线程代数的知识，4x4的矩阵可以对一个图形做所有的线性变换。

对于4x4矩阵，Qt也提供了一系列的辅组方法：​​https://doc.qt.io/qt-6/qml-matrix4x4.html​​

Rectangle {
    width: 100
    height: 100
    color: "red"

    transform: Matrix4x4 {
        property real a: Math.PI / 4
        matrix: Qt.matrix4x4(Math.cos(a), -Math.sin(a), 0, 0,
                             Math.sin(a),  Math.cos(a), 0, 0,
                             0,           0,            1, 0,
                             0,           0,            0, 1)
    }
}

状态转换--3D翻页效果

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        id: rect
        anchors.fill: parent
        Rectangle {
            color: "blue"
            anchors.fill: parent
            id: p1
            Item {
                anchors.fill: parent
                opacity: p1.opacity
                Behavior on opacity {
                    PropertyAnimation{duration: 1000}
                }

                Text {
                    anchors.centerIn: parent
                    text: qsTr("page1")
                }
            }

            transform: [
                Rotation {
                    id: p1_ro
                    origin.x: p1.width / 2
                    origin.y: p1.height / 2
                    axis{x:0;y:1;z:0}
                    Behavior on angle {
                        RotationAnimation {
                            duration: 1000
                            direction: RotationAnimation.Clockwise
                        }
                    }
                }

            ]
        }
        Rectangle {
            id: p2
            anchors.centerIn: parent
            anchors.fill: parent
            color: "blue"
            opacity: 0
            Item {
                anchors.fill: parent
                opacity: p2.opacity
                Behavior on opacity {
                    PropertyAnimation{duration: 1000}
                }
                Text {
                    anchors.centerIn: parent
                    text: qsTr("page2")
                }
            }
             transform: [
                Rotation {
                    id: p2_ro
                    origin.x: p1.width / 2
                    origin.y: p1.height / 2
                    axis{x:0;y:1;z:0}
                    angle: 180
                    Behavior on angle {
                        RotationAnimation {
                            duration: 1000
                            direction: RotationAnimation.Counterclockwise
                        }
                    }
                }

            ]
        }
        states: [
            State {
                name: "page2"
                    changes:[
                        PropertyChanges {
                            target: p1
                            opacity: 0
                        },
                        PropertyChanges {
                            target: p2
                            opacity: 1
                        },
                        PropertyChanges {
                            target: p1_ro
                            angle: 180
                        },
                        PropertyChanges {
                            target: p2_ro
                            angle: 0
                        }
                ]
            },
             State {
                name: ""
                    changes:[
                        PropertyChanges {
                            target: p2
                            opacity: 0
                        },
                        PropertyChanges {
                            target: p1
                            opacity: 1
                        },
                        PropertyChanges {
                            target: p2_ro
                            angle: 180
                        },
                        PropertyChanges {
                            target: p1_ro
                            angle: 0
                        }
                ]
            }
        ]
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if(rect.state === "")
                {
                    rect.state = "page2"
                }
                else {
                    rect.state = ""
                }
            }
        }
    }
}