Qml自定义组件之车辆风扇展示

上面表示空调系统，有风在吹动，可以调节风速和风向

实现思路：

1、让美工准备风吹动效果的多张png图片，如下，且名称按顺序命名好：

2、利用Image元素显示这些图片

3、利用Timer定时器元素不停的切换Image元素的显示的图片，从而出现动图的效果

4、缩短定时器的超时间隔，则图片显示切换加快，则风速加快。拉长定时器的超时间隔，则图片显示切换变慢，则风速变慢

5、利用transform属性，让他绕着x轴旋转，来模拟风向的变化

6、当然也可以用AnimatedImage元素直接显示动图，但动图需要是webp格式的高清动图，gif格式的会很糊

代码如下：

先是自定义的Wind组件

import QtQuick
import QtQuick.ControlsItem {//暴露属性：总帧数，即显示多少张图片property int frameCnt:10//暴露属性：播放速度，大于1则加快，小于1则变慢property double speed: 1//组件生成时开启定时器Component.onCompleted: {timer.start()}Image {id: img//声明属性当前帧property int currentFrame: 0anchors.fill: parent//图片文件的命名和当前帧绑定source: "./wind/wind_"+currentFrame+".png"fillMode: Image.PreserveAspectFit}//通过定时器不停的变更图片当前显示的画面Timer{id:timer//间隔越小，则速度越快，默认1000/30ms为正常速度（即30帧/秒）//绑定speed，speed大于1，则间隔变短，画面切换越快interval: 1000/30/speedrepeat: true;//每次超时时更新当前帧，则图片源也会跟着变化，则实现了动图的显示onTriggered: {if(img.currentFrame<frameCnt-1){img.currentFrame++}else{img.currentFrame=0;}}}}

然后使用

import QtQuick
import QtQuick.ControlsWindow {id:rootwidth: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectanchors.fill: parentcolor: "black"Wind{width: 200height: 200anchors.centerIn: parentframeCnt: 145speed: s2.value//绑定风速滑动条的值，滑动条一变化，则播放速度就会变化//利用变换，绕着x轴上下旋转。模拟风向的变化transform: [Rotation{angle:s1.value//角度绑定风向滑动条的值，滑动条一变化，则风向就会变化origin.x:width/2origin.y:0axis.x:1//绕着x轴旋转axis.y:0axis.z:0}]}//调整风向的滑动条Column{spacing: 10anchors.left: rect.leftanchors.leftMargin: 20anchors.verticalCenter: rect.verticalCenterLabel{id:lbl1text: "Y"font.family: "Microsoft Yahei"color: "white"}Slider{id:s1anchors.horizontalCenter: lbl1.horizontalCenterwidth: 50height: 200from: -20to:180value: 80orientation: Qt.Vertical}}//调整风速的滑动条Row{id:rowspacing: 10anchors.bottom: rect.bottomanchors.bottomMargin: 20anchors.horizontalCenter: rect.horizontalCenterLabel{id:lbl2text: "风速"font.family: "Microsoft Yahei"color: "white"anchors.bottom: row.bottom}Slider{id:s2anchors.verticalCenter:  lbl2.verticalCenterwidth: 200height: 50stepSize: 0.1from: 0to:5value: 1orientation: Qt.Horizontal}}}
}