QML笔记-在背景图中添加NumberAnimation使得界面效果更佳（小技巧）

目录

背景

代码及演示

要注意的问题

背景

最近在读官方的QML的例子，发现这个小技巧，可以带来更多的用户体验。真的很有用，在此记录下！

代码及演示

先来张静态图吧：

程序运行截图如下：

这里让背景旋转起来，使视觉上，更加带来冲击。

关键代码如下：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Hello World")

    Image {

        source: "qrc:/img/bg.jpg"
        anchors.centerIn: parent
        transformOrigin: Item.Center

        NumberAnimation on rotation {

            from: 0
            to: 360
            duration: 100000 / 2
            loops: Animation.Infinite
        }

    }
}

这里没有设置Image的model，所以可知，他是处于拉伸的（默认情况下）

要注意的问题

当我把窗口放大后：

可以看到会出现这样的效果。

对付这种情况，个人觉得有以下几种：

           1. 把model设置为Pad

           2. 图片要够大

           3. 限制窗口大小