QML学习之路03: 鼠标点击窗口实现简单的旋转动画

最新推荐文章于 2024-07-11 09:03:13 发布

RoboticsLearner

最新推荐文章于 2024-07-11 09:03:13 发布

阅读量1k

点赞数 2

分类专栏： QML

本文链接：https://blog.csdn.net/l1216766050/article/details/80417162

版权

QML 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

main.cpp

#include <QGuiApplication>
//#include <QQmlApplicationEngine>
#include <QQuickView> 

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

//    QQmlApplicationEngine engine;
//    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
//    if (engine.rootObjects().isEmpty())
//        return -1;
    QQuickView *view = new QQuickView();
    view->setSource(QUrl("qrc:/animation.qml"));
    view->show(); //实现快速预览

    return app.exec();
}

animation.qml

import QtQuick 2.9

Image{
    id: root
    source: "background.png" //注意: 加载图片图标资源前, 需要将这些资源加入qrc文件, 否则运行时无法得到想要的结果
    property int padding: 100 //自定义属性
    property int duration: 400
    property bool running: false
    Image{
        id: box
        x: root.padding
        y: (root.height-height)/2
        source: "rocket.png"

        NumberAnimation on x{ //沿着x坐标轴
            to: root.width - box.width - root.padding
            duration: root.duration
            running: root.running
        }

        RotationAnimation on rotation{ //旋转动画
            to: 360
            duration: root.duration
            running: root.running

        }
    }

    MouseArea{ //指定鼠标响应区域
        anchors.fill: parent
        onClicked: root.running = true
    }

}