经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » C++ » 查看文章
32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)
来源:cnblogs  作者:诺谦  时间:2021/6/28 9:42:48  对本文有异议

 要想模仿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 }"的话.

可以看以下代码,如下所示:

  1. Row {
  2. x: 10; y: 10
  3. spacing: 10
  4. anchors.centerIn: parent
  5. Image { source: "qrc:/head.jpg"; antialiasing: true; rotation: 30}
  6. Image {
  7. id: image
  8. source: "qrc:/head.jpg"
  9. antialiasing: true
  10. transform: Rotation {
  11. origin.x: image.sourceSize.width/2;
  12. origin.y: image.sourceSize.height/2;
  13. axis { x: 0; y: 0; z: 1 }
  14. angle: 30
  15. }
  16. }
  17. }

效果如下所示:

 

 

可以看到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

最终代码如下所示:

  1. import QtQuick 2.12
  2. import QtQuick.Window 2.12
  3. Window {
  4. id: wind
  5. visible: true
  6. width: flipable.width
  7. height: flipable.height * 1.3
  8. flags: Qt.Window | Qt.FramelessWindowHint
  9. property var angleVlue : 0
  10. color: "#00000000"
  11. Flipable {
  12. id: flipable
  13. width: 426
  14. height: 327
  15. y: (wind.height - height) /2
  16. property bool flipped: false
  17. front: Image {
  18. id: frontImage
  19. anchors.fill: flipable
  20. source: "qrc:/1.png"
  21. smooth: true
  22. antialiasing: true
  23. }
  24. back: Image {
  25. id: backImage
  26. anchors.fill: flipable
  27. source: "qrc:/2.png"
  28. smooth: true
  29. antialiasing: true
  30. }
  31. transform: Rotation {
  32. id: rotation
  33. origin.x: flipable.width/2
  34. origin.y: flipable.height/2
  35. axis { x: 0; y: 1; z: 0 } // set axis.y to 1 to rotate around y-axis
  36. angle: 0 // the default angle
  37. }
  38. states: State {
  39. name: "back"
  40. PropertyChanges { target: rotation; angle: 180 }
  41. when: flipable.flipped
  42. }
  43. transitions: Transition {
  44. NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad}
  45. }
  46. MouseArea {
  47. anchors.fill: parent
  48. onClicked: {
  49. flipable.flipped = !flipable.flipped
  50. }
  51. }
  52. }
  53. }

 

该文章demo已上传群文件,需要的自行下载 

 

 

 

 

 

原文链接:http://www.cnblogs.com/lifexy/p/14909726.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号