QML简单属性动画

今天分享个简单的QML属性动画，代码注释的很详细，对于qml初学者来说应该很好理解，话不多说，直接上图，让我们先来看看是什么效果。

代码

import QtQuick 2.12                         //加载开发Qml应用的标准库
import QtQuick.Controls 2.12                //加载开发Qml控件

ApplicationWindow {                         //窗口
    visible: true                           //设置是否可见
    width: 640                              //设置宽
    height: 480                             //设置高
    title: qsTr("属性动画")                  //设置标题

    Rectangle{                              //定义一个矩形
        id:rect                             //给一个id
        x:10;y:10                           //设置x,y坐标
        width: 100                          //设置宽
        height: 100                         //设置高

        state: "normal"                     //设置默认状态

        states: [                           //状态是个列表
            State {                         //状态1
                name: "normal"              //设置状态名称
                PropertyChanges {           //性质改变
                    target: rect            //对rect进行操作
                    color:"red"             //颜色改成red
                }
            },
            State {                         //状态2
                name: "lightblue"
                // 方式一，采用数组，这种方式，当同时需要改变不同target的时候，可以用这种方式
                //      changes: [                        //changes是个列表
                //          PropertyChanges {             //性质改变
                //              target:rect               //对rect进行操作
                //              color:"lightblue"         //颜色改成lightblue
                //          },
                //          PropertyChanges {
                //              target: rect
                //              width:200
                //              height:50
                //          }
                //      ]
                // 方式二，直接定义在Changes中，是一种并发的操作
                PropertyChanges {               //性质改变
                    target: rect                //对rect进行操作
                    color:"lightblue"           //颜色改成lightblue
                    width:200                   //设置宽度
                    height:50                   //设置高度
                }
            }
        ]

        transitions: [
            Transition {
                from: "normal"
                to: "lightblue"
                PropertyAnimation{
                    properties: "color,width,height"  //基于哪些属性变化（属性名称）
                    duration: 2000                    //过程时间
                }
            }
        ]
    }

    Button{
        id: b_changeState
        x: 10;y:200
        text: "变换状态"
        onClicked: rect.state = "lightblue"     //点击这个按钮执行这个状态
    }

    Button{
        id: b_recover
        y:200
        anchors.left: b_changeState.right       //锚点设置，这个按钮的左侧，贴着id为b_changeState的按钮的右侧
        anchors.leftMargin: 10                  //锚点设置，这个按钮左边距为10
        text: "恢复"
        onClicked: rect.state = "normal"        //按钮点击事件，rect的状态改变成normal
    }
}

喜欢就加个关注，以后会分享更多简单好玩又有趣的动画效果。