欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

程序员文章站 2022-03-25 15:49:24
要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示: 最终效果如下所示: 1.Rotation介绍 Rotation类型提供了一种通过旋转类型转换旋转Item的方法。 它允许(z轴)相对于任意点 ......

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

32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

最终效果如下所示:

32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

 

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,顺时针方向旋转的角度。

大家可以参考如下图所示:

32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

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

 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

大家如果还没理解的话,并且可能会懵逼为什么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
              }
          }
}

效果如下所示:

 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

 

可以看到axis { x: 0; y: 0; z: 1 }其实和rotation没区别,都是2d旋转

这是因为"axis { x: 0; y: 0; z: 1 }"设置的轴线是z坐标的,所以旋转的时候只有xy坐标进行转换.如下图所示:

32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

 

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已上传群文件,需要的自行下载