在学习了MouseArea和Text之后，这一节开始学习image相关的知识。
和上一节QT Demo 之 text一样，imageelements的入口也是一个LauncherList，然后添加了5个子example，下面我就针对每一个子example进行详细分析。
首先看到的是borderimage.qml的主体结构是由一个BorderImageSelector和Flickable组成的：
Rectangle {
id: page
width: 320
height: 480
BorderImageSelector {...}
Flickable {...}
}
这里的BorderImageSelector是一个自定义的Component，由content/BorderImageSelector.qml文件定义。
从Demo的运行效果图上可以看到BorderImageSelector实际上是windows上部的左右导航按钮，如下图所示：
查看BorderImageSelector.qml的代码，也可以看到有一个有两个左右的按钮图片、一个按钮相应函数和一个使用Repeater来显示的文本：
Item {
id: selector
property int curIdx: 0
property int maxIdx: 3
property int gridWidth: 240
property Flickable flickable
width: parent.width
height: 64
function advance(steps) {...}
Image {...}
Image {...}
Repeater {...}
}两个左右的按钮，使用的是同一张图片，只不过一个做了镜像；
按钮的点击操作也是一样，一个向左一个向右(调用selector.advance()函数，传递不同的参数来实现)；
至于两个按钮的透明度，则是根据当前的是否是最左(或最右)来判断后，进行设置，以便给用户进行操作提示；
Image {
source: "arrow.png"
MouseArea{
anchors.fill: parent
onClicked: selector.advance(-1)
}
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
opacity: selector.curIdx == 0 ? 0.2 : 1.0
Behavior on opacity {NumberAnimation{}}
}
Image {
source: "arrow.png"
mirror: true
MouseArea{
anchors.fill: parent
onClicked: selector.advance(1)
}
opacity: selector.curIdx == selector.maxIdx ? 0.2 : 1.0
Behavior on opacity {NumberAnimation{}}
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
}advance()函数，则是通过改变curIdx的值影响两个Image以及Repeater的显示效果，通过改变flickable.contentX的值，改变外面的Flickable显示效果：
function advance(steps) {
var nextIdx = curIdx + steps
if (nextIdx < 0 || nextIdx > maxIdx)
return;
flickable.contentX += gridWidth * steps;
curIdx += steps;
}最后的Repeater则是通过给定的数据([ "Scale", "Repeat", "Scale/Repeat", "Round" ])，按照指定的方式(delegate属性描述)进行多个item的显示，这里分别是设定了text的x座标以及透明度参数： Repeater {
model: [ "Scale", "Repeat", "Scale/Repeat", "Round" ]
delegate: Text {
text: model.modelData
anchors.verticalCenter: parent.verticalCenter
x: (index - selector.curIdx) * 80 + 140
Behavior on x { NumberAnimation{} }
opacity: selector.curIdx == index ? 1.0 : 0.0
Behavior on opacity { NumberAnimation{} }
}
}注：在BorderImageSelector.qml中多次使用了类似下面的的动画效果：
Behavior on opacity {NumberAnimation{}}
因为这里NumberAnimation{}动画是定义在Behavior中，所以其默认的from就是其属性变化的开始值(如上面的1.0)，其默认的to就是其属性变化的结束值(如上面的0.0)，duration的默认值是250ms。
该示例中除了上面的导航条，剩余的元素都放到了Flickable元素中，并且按照Grid的方式进行排列：
Flickable {
id: mainFlickable
width: parent.width
anchors.bottom: parent.bottom
anchors.top: selector.bottom
interactive: false //Animated through selector control
contentX: -120
Behavior on contentX { NumberAnimation {}}
contentWidth: 1030
contentHeight: 420
Grid {...}
}注1：contentHeight的值是420，大小和整体的高度(480)减去导航条的高度(64)差不多，而contentWidth的值是1030，大概是整体宽度(320)的3倍多；
注2：在运行的程序中，我们发现无法使用鼠标进行水平方向的拖动，这与Flickable的特性冲突。这里的诀窍就是interactive: false属性，如注释中所说，该Flickable通过selector来控制
Flickable中共有8个MyBorderImage排列在一个Grid组中：
Grid {
anchors.centerIn: parent; spacing: 20
MyBorderImage {}
MyBorderImage {}
MyBorderImage {}
MyBorderImage {}
MyBorderImage {}
MyBorderImage {}
MyBorderImage {}
MyBorderImage {}
}Grid的宽度和父元素的宽度一致，各个MyBorderImage元素之间的间距是20
MyBorderImage定义在:/imageelements/content/MyBorderImage.qml文件中。
Item {
id: container
property alias horizontalMode: image.horizontalTileMode
property alias verticalMode: image.verticalTileMode
property alias source: image.source
property int minWidth
property int minHeight
property int maxWidth
property int maxHeight
property int margin
width: 240; height: 200
BorderImage {...}
}从MyBorderImage的代码中可以看出，一个MyBorderImage包含：最大/最小宽度、最大/最小高度、外边距，以及水平/垂直拉伸/平铺模式和图片的数据源，而调用出的代码也是分别设置不同的属性来演示不同的拉伸/平铺效果。
BorderImage {
id: image; anchors.centerIn: parent
SequentialAnimation on width {}
SequentialAnimation on height {}
border.top: container.margin
border.left: container.margin
border.bottom: container.margin
border.right: container.margin
}
BorderImage的官方说明如下：
The BorderImage element provides an image that can be used as a border.
The BorderImage element is used to create borders out of images by scaling or tiling parts of each image.
A BorderImage element breaks a source image, specified using the url property, into 9 regions, as shown below:
When the image is scaled, regions of the source image are scaled or tiled to create the displayed border image in the following way:
使用一个BorderImage，只需要设置width、height、source，以及border属性和horizontalTileMode/verticalTileMode属性即可，但是为了演示BorderImage拉伸和平铺的具体动画效果，分别添加了在width和height上的动画效果。
SequentialAnimation on width {
loops: Animation.Infinite
NumberAnimation {
from: container.minWidth; to: container.maxWidth
duration: 2000; easing.type: Easing.InOutQuad
}
NumberAnimation {
from: container.maxWidth; to: container.minWidth
duration: 2000; easing.type: Easing.InOutQuad
}
}上述动画的意思是，在2s的时间内，BorderImage的width从minWidth变到maxWidth，然后再使用2s的时间变回来。即完整的演示BorderImage改变拉伸/平铺的具体过程，而在height上的动画效果和在width上的类似，此处不再展开。BorderImage的horizontalTileMode/verticalTileMode属性共有三种取值，分别如下：
分别的意思就是：拉伸、平铺和完整的(就是通过拉伸和平铺配合保证不出现裁边，且效果OK)这三种方式。
注意：其中拉伸的处理和android中的.9.png格式的图片渲染效果是一样的，也就是说BorderImage中的拉伸和平铺都是基于类似.9.png效果的、只针对于中间区域的拉伸/平铺、而保证四个边角不变的一种图像处理。
image.qml中的例子比较简单，就是演示了图片的几种fillMode的不同效果：
Rectangle {
width: 320
height: 480
Grid {
property int cellWidth: (width - (spacing * (columns - 1))) / columns
property int cellHeight: (height - (spacing * (rows - 1))) / rows
anchors.fill: parent
anchors.margins: 30
columns: 2
rows: 3
spacing: 30
ImageCell { mode: Image.Stretch; caption: "Stretch" }
ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" }
ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" }
ImageCell { mode: Image.Tile; caption: "Tile" }
ImageCell { mode: Image.TileHorizontally; caption: "TileHorizontally" }
ImageCell { mode: Image.TileVertically; caption: "TileVertically" }
}
}上面的cellWidth和cellHeight是通过设置的columns、rows和spacing来计算出来的，即Grid中每一个Item的大小，其值用于ImageCell的width和height中；而columns、rows和spacing则是Grid的属性变量。
这里的ImageCell也是一个自定义的Component，由:/imageelements/content/ImageCell.qml文件描述。
Item {
property alias mode: image.fillMode
property alias caption: captionItem.text
width: parent.cellWidth; height: parent.cellHeight
Image {
id: image
width: parent.width; height: parent.height - captionItem.height
source: "qt-logo.png"
clip: true // only makes a difference if mode is PreserveAspectCrop
}
Text {
id: captionItem
anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom
}
}从代码中可以看出，该ImageCell是由一个Image和一个Text组成，Image的fileMode和Text的text都是由外面的调用处指定，如：
ImageCell { mode: Image.Stretch; caption: "Stretch" }
ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" }
ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" }Image的fillMode属性是一个枚举变量，支持以下数值：
上面的几种填充模式，默认的是Image.Stretch，如果要保持图片不变，需要自己设置为Image.Pad。
shadows示例中主要也是演示了BorderImage的特性，只不过通过设置anchors的Margin参数为负值，来实现立体投影的效果：
//! [shadow]
BorderImage {
anchors.fill: rectangle
anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
border { left: 10; top: 10; right: 10; bottom: 10 }
source: "shadow.png"
}
//! [shadow]因为这个示例中没有什么新鲜知识，不再详述。这一个示例重点演示了如何使用AnimatedSprite来进行动画演示，其中MouseArea里面的操作也是针对AnimatedSprite的功能进行演示：
Item {
width: 320
height: 480
Rectangle {
anchors.fill: parent
color: "white"
}
//! [sprite]
AnimatedSprite {...}
//! [sprite]
MouseArea {...}
}
AnimatedSprite provides rendering and control over animations which are provided as multiple frames in the same image file. You can play it at a fixed speed, at the frame rate of your display, or manually advance and control the progress..
从官方说明中可以了解到，这是一种通过显示图片中不同部分(反过来看，即把一个动画的所有帧都保存在一张图片上)来显示一个动画效果的组件。如本例中的图片(原图片太大，此处只显示了第一行的5帧)：
示例中的AnimatedSprite代码如下：
//! [sprite]
AnimatedSprite {
id: sprite
width: 170
height: 170
anchors.centerIn: parent
source: "content/speaker.png"
frameCount: 60
frameSync: true
frameWidth: 170
frameHeight: 170
loops: 3
}
//! [sprite]通过查看sourece指定的content/speaker.png图片，我们可以看到其长宽分别为850*2040，对应与上面的frameWidth和frameHeight都是170，正好是5*12即frameCount的值。
frameSync的说明是这样的：
If true, then the animation will have no duration. Instead, the animation will advance one frame each time a frame is rendered to the screen. This synchronizes it with the painting rate as opposed to elapsed time.
对于the animation will advance one frame each time a frame is rendered to the screen比较好理解，就是一帧渲染后紧接这渲染下一帧；但是对于This synchronizes it with the painting rate as opposed to elapsed time这句话就完全高度不懂了，正所谓，每个单词的意思都懂，但是连在一起就不知道要表达什么了。大概的意思，我理解的是绘画的速度是相对于渲染速度，而不是按照时间，也就是说如果CPU计算能力强，那么就显示的时间短，如果CPU云算能力太烂，那就慢慢渲染吧。
鼠标操作部分则是演示了AnimatedSprite的几个属性(running、paused)和几个函数操作(start()、pause()、advance())：
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (!sprite.running)
sprite.start();
if (!sprite.paused)
sprite.pause();
if ( mouse.button == Qt.LeftButton ) {
sprite.advance(1);
} else {
sprite.advance(-1);
}
}
}
这里的鼠标左右键操作分别是显示向前和向后的一帧，如果我们需要完成左键正转、右键反转的效果，则可以修改代码如下所示：
onClicked: {
if ( mouse.button == Qt.LeftButton ) {
sprite.reverse = false;
sprite.restart();
} else {
sprite.reverse = true;
sprite.restart();
}
}
这个示例也是展示了一个动画效果，不过采用的方法和上一个示例有所不同，先看一下源文件的主体结构：
Item {
width: 320
height: 480
MouseArea {...}
//! [animation]
SequentialAnimation {...}
//! [animation]
SpriteSequence {...}
}其中SpriteSequence和上一个示例中学到的AnimatedSprite都是属于QML Types中的Visual Types，但是它和AnimatedSprite的使用上有非常大的差异。
SpriteSequence renders and controls a list of animations defined by Sprite types.
从官方说明上来看，一个SpriteSequence是有多个Sprite来组成的并通过一定的顺序渲染到UI上，这里的例子也可以看的出：
SpriteSequence {
id: image
width: 256
height: 256
anchors.horizontalCenter: parent.horizontalCenter
interpolate: false
goalSprite: ""
//! [still]
Sprite{}
//! [still]
Sprite{}
Sprite{}
Sprite{}
Sprite{}
}其中，interpolate参数指定了在进行动画渲染时不需要进行插值处理(如果设置为true，实际效果并不好，此处是希望完全按照Sprite的方式进行动画演示)，goalSprite属性设置为空，但是在SequentialAnimation中会改变其值。
剩下的五个Sprite，则依次描述了几个Sprite(可以翻译成为调皮鬼)，然后再通过MouseArea的操作，启动SequentialAnimation动画，进一步通过修改SpriteSequence的属性，完成整个动画效果。分开来讲就是：
第一个Sprite，frameCount是1，frameX和frameY属性没有设置，默认都是0，那么取到的就是图片中的第一帧：
Sprite{
name: "still"
source: "content/BearSheet.png"
frameCount: 1
frameWidth: 256
frameHeight: 256
frameDuration: 100
to: {"still":1, "blink":0.1, "floating":0}
}第二个Sprite，frameCount是3，frameX和frameY分别是256和1536，那么就是图片中的最后三帧：
Sprite{
name: "blink"
source: "content/BearSheet.png"
frameCount: 3
frameX: 256
frameY: 1536
frameWidth: 256
frameHeight: 256
frameDuration: 100
to: {"still":1}
}除了frameCount、frameX和frameY这三个参数，还有两个参数需要重点关心：
frameDuration：still的Sprite只有1帧，而blink的Sprite却有3帧，但是他们的frameDuration都是100，这样动画的效果就会是小熊眨眼的动作很快；
to：这个字段表示了当前Sprite动画完成后，下一个进行的Sprite。blink的to字段只有still，则blink动画完成后肯定会显示still动画，但是still的to字段是{"still":1, "blink":0.1, "floating":0}，则表明有10/11的概率会继续显示still，而只有1/11的概率才会显示blink，这两个Sprite配合起来的效果就是小熊半天才会眨一次眼，但是眨眼的动画会很快，而且因为这两个的Sprite的to字段没有跳出他们两个，那么如果没有外界触发，则会一直显示这两个动画。
第三个Sprite的名字是floating，意思是飘动的，结合frameX和frameY都是0，frameCount是9，则是下述的几帧动画：
Sprite{
name: "floating"
source: "content/BearSheet.png"
frameCount: 9
frameX: 0
frameY: 0
frameWidth: 256
frameHeight: 256
frameDuration: 160
to: {"still":0, "flailing":1}
}第四个Sprite，名称是flailing，意思是挥舞，结合frameX和frameY分别是0和768，frameCount是8，则是下述的几帧动画：
Sprite{
name: "flailing"
source: "content/BearSheet.png"
frameCount: 8
frameX: 0
frameY: 768
frameWidth: 256
frameHeight: 256
frameDuration: 160
to: {"falling":1}
}最后一个Sprite，其名称是falling，意思是下落，结合frameX和frameY分别是0和1280，frameCount是5，则是下述的几帧动画：
Sprite{
name: "falling"
source: "content/BearSheet.png"
frameCount: 5
frameY: 1280
frameWidth: 256
frameHeight: 256
frameDuration: 160
to: {"falling":1}
}在了解了每一个Sprite的具体图像和意义后，我们需要仔细分析一下他们的to字段，它们之间的关系可以用下图描述：
其中虚线表示，不会自动进行动画跳转，但是如果通过设置goalSprite属性，则可以通过虚线路径进行动画跳转，而本示例中也是利用这一点，在鼠标事件中进行了处理。
下面就看看鼠标事件和触发的动画的代码：
MouseArea {
onClicked: anim.start();
anchors.fill: parent
}
//! [animation]
SequentialAnimation {
id: anim
ScriptAction { script: image.goalSprite = "falling"; }
NumberAnimation { target: image; property: "y"; to: 480; duration: 12000; }
ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
PropertyAction { target: image; property: "y"; value: 0 }
}
//! [animation]从代码中可以看到，鼠标的点击事件触发了anim动画的开始，而anim动画是一个SequentialAnimation的动画，从名字上也可以看出在这个动画中的的子动画一个个的顺序执行，如官方说明的一般“Animations defined in a SequentialAnimation are run one after the other”。
anim动画中有3个Action和一个Animation，按照顺序执行，则是：
学到的知识：
这一章示例的学习也耗费了好几天的时间，尤其是在最后一个SpriteSequence组件的使用让我刚开始简直是无处下手的感觉。虽然和AnimatedSprite组件一样，都是展示图片中的动画帧，但是AnimatedSprite组件的使用方式比较单一，只能完全按照图片中定义的动画帧顺序进行显示，而SpriteSequence组件则非常的灵活，通过自定义的Sprite列表(尤其是to字段)，结合Animation动画则会完成丰富多彩的视觉效果。
原文地址：http://blog.csdn.net/nfer_zhuang/article/details/40985123
