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

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

实现思路：

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

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

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

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

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

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

代码如下：

先是自定义的Wind组件

import QtQuick
import QtQuick.Controls

Item {

    //暴露属性：总帧数，即显示多少张图片
    property int frameCnt:10
    //暴露属性：播放速度，大于1则加快，小于1则变慢
    property double speed: 1

    //组件生成时开启定时器
    Component.onCompleted: {
        timer.start()
    }

    Image {
        id: img

        //声明属性当前帧
        property int currentFrame: 0

        anchors.fill: parent
        //图片文件的命名和当前帧绑定
        source: "./wind/wind_"+currentFrame+".png"
        fillMode: Image.PreserveAspectFit

    }

    //通过定时器不停的变更图片当前显示的画面
    Timer{
        id:timer

        //间隔越小，则速度越快，默认1000/30ms为正常速度（即30帧/秒）
        //绑定speed，speed大于1，则间隔变短，画面切换越快
        interval: 1000/30/speed
        repeat: true;

        //每次超时时更新当前帧，则图片源也会跟着变化，则实现了动图的显示
        onTriggered: {
            if(img.currentFrame<frameCnt-1)
            {
                img.currentFrame++
            }
            else
            {
                img.currentFrame=0;
            }
        }
    }

}

然后使用

import QtQuick
import QtQuick.Controls

Window {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        id:rect

        anchors.fill: parent

        color: "black"

        Wind{
            width: 200
            height: 200
            anchors.centerIn: parent
            frameCnt: 145
            speed: s2.value//绑定风速滑动条的值，滑动条一变化，则播放速度就会变化

            //利用变换，绕着x轴上下旋转。模拟风向的变化
            transform: [
                Rotation{
                    angle:s1.value//角度绑定风向滑动条的值，滑动条一变化，则风向就会变化
                    origin.x:width/2
                    origin.y:0
                    axis.x:1//绕着x轴旋转
                    axis.y:0
                    axis.z:0
                }
            ]
        }


        //调整风向的滑动条
        Column{
            spacing: 10

            anchors.left: rect.left
            anchors.leftMargin: 20
            anchors.verticalCenter: rect.verticalCenter

            Label{
                id:lbl1
                text: "Y"
                font.family: "Microsoft Yahei"
                color: "white"
            }

            Slider{
                id:s1
                anchors.horizontalCenter: lbl1.horizontalCenter
                width: 50
                height: 200
                from: -20
                to:180
                value: 80
                orientation: Qt.Vertical
            }

        }

        //调整风速的滑动条
        Row{
            id:row
            spacing: 10

            anchors.bottom: rect.bottom
            anchors.bottomMargin: 20
            anchors.horizontalCenter: rect.horizontalCenter

            Label{
                id:lbl2
                text: "风速"
                font.family: "Microsoft Yahei"
                color: "white"
                anchors.bottom: row.bottom
            }

            Slider{
                id:s2
                anchors.verticalCenter:  lbl2.verticalCenter
                width: 200
                height: 50
                stepSize: 0.1
                from: 0
                to:5
                value: 1
                orientation: Qt.Horizontal
            }

        }
    }
}