Qt之QML动画

前言

使用QML差不多2年了，在使用过程中深深的感受到QML的强大与便捷，让我深陷其中，不能自拔。其中QML相比传统的界面最大的优势就是便捷的动画效果与炫酷的粒子效果，让QML做出来的界面能媲美WPF和各种JS前端框架的效果。下面我们就开始进入QML动画美妙的世界吧。

更现代的程序界面

与传统的界面相比，现代化的程序界面的特色是更加鲜艳的色彩，以及更加丰富的动画。QML设计的目的就是用来创建Fluid UIs(流体界面)，所谓流体界面，就是UI组件是动态的，而不会突然出现、消失或跳转，QML的动画效果就很好的实现了流体界面的要求。

QML动画实现方法

在QML中，实现动画最常用的是State(状态)&Transactions(过渡) 与 Animating Properyty Changes（属性改变动画）这两种方法。

1、State & Transactions(状态与过渡)

QML可以在组件中声明各种State(状态)，在状态中可以包含该组件所需修改的属性值，当我们想改变组件的属性值时，只需该组件的State即可。Transaction(过渡)用来设置状态改变时的动画，常与State配合使用。创建一个Transaction对象，然后将其添加到组件的transcation属性中。使用方法如下：

以下代码展示的是使用State&Transactions方法实现一个页面切换的动画效果。

Window {
    visible: true
    width: 400; height: 300
    title: "Animation"
 
    Rectangle { anchors.fill: parent; color: "green" }
 
    Rectangle {
        id: pageA
        color: "red"
        width: parent.width; height: parent.height
         
        // 创建2个状态"show","hide"分别表示显示界面和隐藏界面
        states: [
            // 将PageA的属性y赋值为0，opacity赋值为1以实现显示的效果
            State {
                name: "show"; PropertyChanges { target: pageA; y: 0; opacity: 1 }
           },
            // 将PageA的属性y赋值为-height，opaticy赋值为0以实现窗口向上移动并消失的效果
            State {
                name: "hide"; PropertyChanges { target: pageA; y: -height; opacity: 0 }
           }
        ]
 
       state: "show"
 
       transitions: Transition {
           PropertyAnimation { properties: "y,opacity"; duration: 1000; easing.type: Easing.InOutBack }
             }
        }
    }
 
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if(pageA.state == "show")