使用qml创建动画与交互界面

效果：

 

1，创建一个QtQuickApplication工程，建立如下用户界面

2，代码如下

import QtQuick 2.3
import QtQuick.Window 2.2

Window{
     visible:true;
     width:480;
     height:320;

     Rectangle{
           id:background;
          anchors.fill:parent;
          color:"blue";
        }
     Text{
          text:qsTr("Hello world");
          anchors.centerIn:parent;
          color:"white";
          font.pointSize:15;
           }
}

 3,想矩形对象添加颜色动画

Rectangle{
  id:background;
  anchors.fill:parent;
  color:"blue";
  SequentialAnimation on color
 {
   ColorAnimation{to:"yellow";duration:1000}
   ColorAnimation{to:"red";duration:1000}
   ColorAnimation{to:"blue";duration:1000}
   loops:Animation.Infinite;
 }
}

4,text object添加透明度动画

Text{
    text:qsTr("Hello World");
    anchors.centerIn:parent;
    color:"white";
    font.pointSize:15;
    SequentialAnimation on opacity{
    
     NumberAnimation{to:0.0;duration:200}
     NumberAnimation{to:1.0;duration:200}
     loops:Animation.Infinite;

    }
}

5，添加旋转动画

sequentialanimation on rotation
{
  NumberAnimation{from:0.0;to:360;duration:200}
  loops:Animation.Inifite;
}

6,添加状态，一个是按下状态一个是释放状态。设置默认的状态是释放

state:"RELEASED";
states:[
   State{
         name:"PRESSED"
         PropertyChanges{target:background;color:"blue"}
        },
   State{
          name:"RELEASED"
          PropertyChanges{target:background;color:"red"}
        }
]

7,创建鼠标响应区域。

MouseArea{
    anchors.fill:parent;
    onPressed:background.state="PRESSED";
    onReleased:background.state="RELEASED";
  }

8,添加一些过度

transitions:
[
     Transition
     {
       from:"PRESSED"
       to:"RELEASED"
       ColorAnimation{target:background; duration:200}       
     },
     Transition
     {
      from:"RELEASED"
      to:"PRESSED"
      ColorAnimation{target:background;duration:200
      }
     }



]