QML入門チュートリアル(3)

前の2つのチュートリアルを経て、文字も表示され、マウスイベントも処理できます.アニメーションを注文しましょう.このチュートリアルでは、マウスを押すと、Hello、Worldが上部から下部まで回転する過程を実現し、色のグラデーションを持つ効果があります.
完全なソースコードmain.qml

import Qt 4.7
 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"
 
     Text {
         id: helloText
         text: "Hello World!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
 
         MouseArea { id: mouseArea; anchors.fill: parent }
 
         states: State {
             name: "down"; when: mouseArea.pressed == true
             PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
         }
 
         transitions: Transition {
             from: ""; to: "down"; reversible: true
             ParallelAnimation {
                 NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                 ColorAnimation { duration: 500 }
             }
         }
     }
 
     Grid {
         id: colorPicker
         x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
         rows: 2; columns: 3; spacing: 3
 
         Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
         Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
     }
 }

それ以外はqmlの他にCellがありますqmlも必要であり,チュートリアル(2)と全く同じである.チュートリアル(2)のコードより増えた内容を見てみましょう.

Text{
         ...
         states: State {
             name: "down"; when: mouseArea.pressed == true
             PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
         }
 
         transitions: Transition {
             from: ""; to: "down"; reversible: true
             ParallelAnimation {
                 NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                 ColorAnimation { duration: 500 }
             }
         }
        ...
     }

tatesはTextに埋め込まれており,Text要素に複数の状態を追加することができ,現在の例では1つの状態しか増加していない.このステータスの名前は「down」で、「when」によっていつこのステータスがトリガーされるかが指定されます.PropertyChangesでは、どの要素のどの属性がどのように変化するかを指定します.例では、PropertyChangesが「target」を使用してidを「helloText」と指定した要素は、y、rotation、colorなどの属性を含むように変化します.Transitionsは、アニメーションの効果を増やすために使用されます(transitionsというコードを削除すると、Hello、Worldの文字も変化しますが、中間アニメーションのグラデーション効果は見えません).同様にtransitionsは複数の形式であり、複数のアニメーションプロシージャを追加できることを意味します.fromとtoは、現在のアニメーションがどの状態変化に作用するかを示します.「from」および「to」のパラメータ名は、Stateの「name」属性から取得されます.ParalleAnimationでは、複数のアニメーションが並列に発生することを指定します.NumberAnimationはqrealタイプの属性変化に使用され、ColorAnimationは色変化に使用されます.詳細については、QMLドキュメントで「Animation and Transitions」を参照してください.では、3つのチュートリアルはこれで終わります.詳細については、Declarative UI Using QMLにアクセスしてください.