要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示:

最终效果如下所示:

1.Rotation介绍
Rotation类型提供了一种通过旋转类型转换旋转Item的方法。
它允许(z轴)相对于任意点进行旋转,还提供了一种为item指定类似3d的旋转的方法。这比旋转属性提供了更多对项目旋转的控制。
它的参数如下所示:
- origin.x、origin.y : real,旋转的原点,缺省情况下,原点是(0,0),父对象的左上角
- axis.x、axis.y、axis.z : real,要旋转的轴,如果你想实现一个类似3d的旋转,你必须指定origin原点和轴。对于一个2D旋转其实就是 (axis { x: 0; y: 0; z: 1 }).
- angle : real,顺时针方向旋转的角度。
大家可以参考如下图所示:

设置原点为中心点,且axis { x: 0; y: 1; z: 0 }时, 那么此时就是3D旋转如下图所示:

大家如果还没理解的话,并且可能会懵逼为什么2D旋转是 "axis { x: 0; y: 0; z: 1 }"的话.
可以看以下代码,如下所示:
- Row {
- x: 10; y: 10
- spacing: 10
- anchors.centerIn: parent
- Image { source: "qrc:/head.jpg"; antialiasing: true; rotation: 30}
- Image {
- id: image
- source: "qrc:/head.jpg"
- antialiasing: true
- transform: Rotation {
- origin.x: image.sourceSize.width/2;
- origin.y: image.sourceSize.height/2;
- axis { x: 0; y: 0; z: 1 }
- angle: 30
- }
- }
- }
效果如下所示:

可以看到axis { x: 0; y: 0; z: 1 }其实和rotation没区别,都是2D旋转
这是因为"axis { x: 0; y: 0; z: 1 }"设置的轴线是z坐标的,所以旋转的时候只有xy坐标进行转换.如下图所示:

2.Flipable介绍
Flipable可以明显地“翻转”在其前后两侧,就像一张卡片。它可以与Rotation、State和Transition类型一起使用,以产生翻转效果。
它的参数如下所示:
- front : Item,指定反转前的页面
- back : Item,指定反转后的页面
- side : enumeration ,只读属性,读出目前的页面是反转前的还是反转后的,可以是Flipable.Front 或者 Flipable.Back
最终代码如下所示:
- import QtQuick 2.12
- import QtQuick.Window 2.12
- Window {
- id: wind
- visible: true
- width: flipable.width
- height: flipable.height * 1.3
- flags: Qt.Window | Qt.FramelessWindowHint
- property var angleVlue : 0
- color: "#00000000"
- Flipable {
- id: flipable
- width: 426
- height: 327
- y: (wind.height - height) /2
- property bool flipped: false
- front: Image {
- id: frontImage
- anchors.fill: flipable
- source: "qrc:/1.png"
- smooth: true
- antialiasing: true
- }
- back: Image {
- id: backImage
- anchors.fill: flipable
- source: "qrc:/2.png"
- smooth: true
- antialiasing: true
- }
- transform: Rotation {
- id: rotation
- origin.x: flipable.width/2
- origin.y: flipable.height/2
- axis { x: 0; y: 1; z: 0 } // set axis.y to 1 to rotate around y-axis
- angle: 0 // the default angle
- }
- states: State {
- name: "back"
- PropertyChanges { target: rotation; angle: 180 }
- when: flipable.flipped
- }
- transitions: Transition {
- NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad}
- }
- MouseArea {
- anchors.fill: parent
- onClicked: {
- flipable.flipped = !flipable.flipped
- }
- }
- }
- }
该文章demo已上传群文件,需要的自行下载