QML 实现简单的翻页功能

最新推荐文章于 2024-08-26 17:29:21 发布

缘如风

最新推荐文章于 2024-08-26 17:29:21 发布

阅读量2.9k

点赞数 1

分类专栏： QML 文章标签：动画 QML

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/78265944

版权

QML 专栏收录该内容

31 篇文章 11 订阅

订阅专栏

利用动画实现简单翻页。可以利用现有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}
    }
}

}