QML 实现简单的翻页功能

来源：互联网发布：mysql忘记用户名密码编辑：程序博客网时间：2024/05/01 09:16

利用动画实现简单翻页。可以利用现有HTML5实现复杂效果。
这里写图片描述

代码如下

ApplicationWindow {    visible: true    width: 640    height: 480    //title: qsTr("Hello World")    color: "black"    //利用动画实现简单的翻页效果。    //存在问题：如果是带字的 则在翻转过程中字体是反的。    Rectangle{        x: 300;        y:100        Image {            id: forimage            source: "qrc:/9_club.png"        }        Image {            id: backimge            source: "qrc:/back.png"            transform: Rotation { id: rotation;origin.x: -5; origin.y: 0; axis { x: 0; y: -1; z: 0 } angle: 0 }        }        SequentialAnimation {                running: true                PropertyAnimation { target: rotation; from : 0; to :90;  property: "angle"; duration: 10000}                //PropertyAnimation { target: backimge; to :"qrc:/9_club.png";  property: "source"; duration: 100}                //PropertyAnimation { target: rotation; to :270;  property: "axis.z"; duration: 1000}                PropertyAnimation { target: rotation; from : 90; to :180;  property: "angle"; duration: 10000}                PropertyAnimation { target: rotation; to : backimge.height/2 ;  property: "origin.y"; duration: 1}                PropertyAnimation { target: rotation; to :270;  property: "axis.z"; duration: 1}    }}}

阅读全文

0 0