QML基础场景应用（一）

QML 加载图像并旋转

1、基础版加载图像

Window {
id : mainWindow //在同一作用域下，保证id唯一性，且见名知意
width: 640 //固定宽度
height: 480 //固定高度
visible: true //可见性
title: qsTr("Hello World") //窗口标题

color : "#ffffff" //背景颜色

Image {
id: root //图片id
source: "qrc:/res/2.png" //加载源， 注意此处的路径需要根据引入方式的不同，写法也不同
anchors.centerIn: parent //锚定点 ，相对于父类而言，后期视值而定

MouseArea { //鼠标相关行为事件入口 如单击，双击，滚轮等
anchors.fill: parent
onClicked: {
root.rotation += 90 //图像固定每次旋转90度
}
}
}
}

2、加入动画过渡过程 ，由于在进行点击时，有明显的割裂感，所以加入过渡效果

Window {
id : mainWindow //在同一作用域下，保证id唯一性，且见名知意
width: 640 //固定宽度
height: 480 //固定高度
visible: true //可见性
title: qsTr("Hello World") //窗口标题

color : "#ffffff" //背景颜色

Image {
id: root //图片id
source: "qrc:/res/2.png" //加载源， 注意此处的路径需要根据引入方式的不同，写法也不同
anchors.centerIn: parent //锚定点 ，相对于父类而言，后期视值而定

MouseArea { //鼠标相关行为事件入口 如单击，双击，滚轮等
anchors.fill: parent
onClicked: {
root.rotation += 90 //图像固定每次旋转90度
}
}

//动画平滑过渡
Behavior on rotation { //当检测到有旋转的行为时，触发
NumberAnimation {
duration: 250//在250ms内，进行从x度到x+90度的旋转过程
}
}
}
}

3、加入动画过程，点击后直接控制循环次数

Window {
id : mainWindow //在同一作用域下，保证id唯一性，且见名知意
width: 640 //固定宽度
height: 480 //固定高度
visible: true //可见性
title: qsTr("Hello World") //窗口标题

color : "#ffffff" //背景颜色

Image {
id: root //图片id
source: "qrc:/res/2.png" //加载源， 注意此处的路径需要根据引入方式的不同，写法也不同
anchors.centerIn: parent //锚定点 ，相对于父类而言，后期视值而定

property bool bRotate: false //设置旋转变量

MouseArea { //鼠标相关行为事件入口 如单击，双击，滚轮等
anchors.fill: parent
onClicked: {
root.bRotate = !root.bRotate; //第x点击为启动，x+1次点击为终止
rotateAnimation.running = root.bRotate
}
}

//动画作法
RotationAnimation{
id : rotateAnimation
target : root
properties: "rotation"
from : 0 //从0度开始
to : 360 //到360度
duration : 1000 //转from 到 to 需要多长时间
loops : Animation.Infinite //无限循环(是int类型，不是bool) ，int类型数据 ,负数为无限循环
running : false //默认不运行
}
}
}

4、修改动画为定时器控制

Window {
id : mainWindow //在同一作用域下，保证id唯一性，且见名知意
width: 640 //固定宽度
height: 480 //固定高度
visible: true //可见性
title: qsTr("Hello World") //窗口标题

color : "#ffffff" //背景颜色

Image {
id: root //图片id
source: "qrc:/res/2.png" //加载源， 注意此处的路径需要根据引入方式的不同，写法也不同
anchors.centerIn: parent //锚定点 ，相对于父类而言，后期视值而定

property bool bRotate: false //设置旋转变量
property real rotateStep: 5 //设置单次旋转角度

// 定时器作法
Timer{
id : rotateTime
interval: 16 //刷新基数,控制旋转速度
repeat: true //是否重复
running:false //是否激活

onTriggered: {
root.rotation = (root.rotation + root.rotateStep) % 360 //设置旋转角度
}
}

MouseArea { //鼠标相关行为事件入口 如单击，双击，滚轮等
anchors.fill: parent
onClicked: {
root.bRotate = !root.bRotate; //第x点击为启动，x+1次点击为终止
rotateTime.running = root.bRotate
}
}
}
}