前言

用QML實現頁面翻轉，QML自帶控件Flipable已實現該功能，但是無法滿足我要的功能需求，于是在Flipable基礎上封裝了一下，添加翻轉過程中的動畫，在翻轉過程中修改頁面opacity、scale、angle。
最終效果圖如下：

代碼實現

先看封裝好的Flipable，命名為TLFlipable.qml

import QtQuick 2.6Flipable {id: containerproperty bool flipped: trueproperty int xAxis: 0property int yAxis: 1property int angle: 180width: front.widthheight: front.heightstate: "back"function flipableClick(){container.flipped = !container.flipped}transform: Rotation {id: rotation;origin.x: container.width / 2;origin.y: container.height / 2axis.x: container.xAxis;axis.y: container.yAxis;axis.z: 0}states: [State {name: "back";when: container.flippedPropertyChanges {target: rotation;angle: container.angle}}]transitions: Transition {SequentialAnimation {ParallelAnimation{NumberAnimation {target: container;property: "scale";to: 0.88;duration: 100}NumberAnimation {target: container;property: "opacity";to:0.7duration: 100;easing.type: Easing.Linear}}ParallelAnimation {NumberAnimation {target: container;property: "scale";to: 0.75;duration: 130}NumberAnimation {target: rotation;properties: "angle";duration: 290}NumberAnimation {target: container;property: "opacity";to:0.4duration: 290;easing.type: Easing.Linear}}ParallelAnimation{NumberAnimation {target: container;property: "scale"to: 1.0duration: 170}NumberAnimation {target: container;property: "opacity";to:1duration: 170;easing.type: Easing.Linear}}}} }

然后調用該控件FlipableTest.qml

import QtQuick 2.6Rectangle{width: 250height: 350TLFlipable{id:flipableanchors.fill: parentfront: rect1back: rect2MouseArea{anchors.fill: parentonClicked: {flipable.flipableClick()}}}Rectangle{id:rect1color:"red"width: parent.widthheight: parent.heightText {anchors.centerIn: parentfont.pixelSize: 30font.bold: truecolor:"white"text: qsTr("Page 1")}}Rectangle{id:rect2color:"green"width: parent.widthheight: parent.heightText {anchors.centerIn: parentfont.pixelSize: 30font.bold: truecolor:"white"text: qsTr("Page 2")}} }

最后用qmlscene執行FlipableTest.qml即可看到以上圖片的翻轉效果。

總結

以上是生活随笔為你收集整理的Qt QML页面翻转控件封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。