新手必学 QML入门教程 (3)

移动开发
本章讲述的和前两篇文章不同,本篇是实习一个简单的动画。transitions 是用于增加动画效果的,如果对transitions 感兴趣,快来参考本文的资料。

QMLQt推出的Qt Quick技术的一部分,是一种新增的简便易学的语言。QML是一种陈述性语言,用来描述一个程序的用户界面:无论是什么样子,以及它如何表现。

经过前面两个教程,文字也能显示,也能处理鼠标事件了,来点动画吧。

新手必学 QML入门教程 (3)

这个教程实现了当鼠标按住的时候,Hello,World从顶部到底部的一个旋转过程,并带有颜色渐变的效果。

完整的源代码main.qml

  1. import Qt 4.7  
  2.  Rectangle {  
  3.      id: page  
  4.      width: 500; height: 200  
  5.      color: "lightgray"  
  6.      Text {  
  7.          id: helloText  
  8.          text: "Hello World!"  
  9.          y: 30  
  10.          anchors.horizontalCenter: page.horizontalCenter  
  11.          font.pointSize: 24; font.bold: true  
  12.  
  13.          MouseArea { id: mouseArea; anchors.fill: parent }  
  14.          states: State {  
  15.              name: "down"; when: mouseArea.pressed == true  
  16.              PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }  
  17.          }  
  18.          transitions: Transition {  
  19.              from: ""; to: "down"; reversible: true  
  20.              ParallelAnimation {  
  21.                  NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }  
  22.                  ColorAnimation { duration: 500 }  
  23.              }  
  24.          }  
  25.      }  
  26.      Grid {  
  27.          id: colorPicker  
  28.          x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4  
  29.          rows: 2; columns: 3; spacing: 3  
  30.          Cell { cellColor: "red"; onClicked: helloText.color = cellColor }  
  31.          Cell { cellColor: "green"; onClicked: helloText.color = cellColor }  
  32.          Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }  
  33.          Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }  
  34.          Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }  
  35.          Cell { cellColor: "black"; onClicked: helloText.color = cellColor }  
  36.      }  
  37.  } 

除了这个main.qml之外,还有一个Cell.qml也是需要的,和教程(2)中的完全一样。下面来看一看比起教程(2)的代码增加出来的内容。

  1. Text{  
  2.          ...  
  3.          states: State {  
  4.              name: "down"; when: mouseArea.pressed == true  
  5.              PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }  
  6.          }  
  7.          transitions: Transition {  
  8.              from: ""; to: "down"; reversible: true  
  9.              ParallelAnimation {  
  10.                  NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }  
  11.                  ColorAnimation { duration: 500 }  
  12.              }  
  13.          }  
  14.         ...  
  15.      } 

states内嵌于Text之中,可以为Text元素添加多个状态,现在的这个例子只增加了一个状态。该状态的名为为”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则用于颜色变化。更多 Animation请在QML文档中查找”Animation and Transitions”。

小结:三篇关于QML教程到此结束。不管是文字显示,还是简单的动画效果,相信你可以和谐的去完成,希望本篇文章对你有所帮助。

责任编辑:zhaolei 来源: Qt技术博客
相关推荐

2011-06-16 09:40:53

QML 教程

2011-06-16 09:28:14

Qt QML 教程

2010-07-27 15:53:15

2010-08-02 09:36:22

Flex

2011-07-29 11:28:58

iPhone开发

2011-06-23 13:50:34

2011-07-04 17:26:00

Qt SQLite

2011-09-07 11:13:27

无线路由器无线路由器设置

2023-11-29 07:30:08

Python用户界面

2009-07-08 15:12:48

Java Servle

2014-05-26 15:35:55

Web组件Web Compone

2022-02-18 09:39:51

Vue3.0Vue2.0Script Set

2010-08-03 13:06:15

Flex Builde

2013-08-29 14:12:52

Storm分布式实时计算

2011-06-16 11:04:07

Qt

2018-03-22 14:59:13

Docker入门容器

2011-09-02 10:59:10

jQuery Mobi

2010-07-20 16:19:54

Perl

2010-06-18 16:56:50

UML建模语言

2013-06-24 13:38:34

HTML5 DataList
点赞
收藏

51CTO技术栈公众号