标签：rgba 代码 实现 inf ota efault cli nim style
要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示:
最终效果如下所示:
1.Rotation介绍
Rotation类型提供了一种通过旋转类型转换旋转Item的方法。
它允许(z轴)相对于任意点进行旋转，还提供了一种为item指定类似3d的旋转的方法。这比旋转属性提供了更多对项目旋转的控制。
它的参数如下所示:
大家可以参考如下图所示:
设置原点为中心点,且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类型一起使用，以产生翻转效果。
它的参数如下所示:
最终代码如下所示:
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已上传群文件,需要的自行下载
32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)
标签：rgba 代码 实现 inf ota efault cli nim style
原文地址：https://www.cnblogs.com/lifexy/p/14909726.html
