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

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
    }

}

运行结果为:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值