要想模仿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已上传群文件,需要的自行下载
需要了解更多c/c++开发分享32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/643513.html