本系列所有文章可以在这里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873) 接上文 [Qt5官方demo解析集12——Qt Quick Particles Examples - CustomParticles](http://blog.csdn.net/cloud_castle/article/details/34950673) 先唠下嗑，在上文CustomParticles中我们接触了强大的ShaderEffect，笔者对其产生了极大的兴趣，于是去找了找有没有更多相关的例程，于是就发现了一个QML Video Shader Effects Example，确实效果华丽，下面放个图，回头再看看这个demo~  这个demo可以处理图片、视频以及摄像头数据，算是非常强大的功能了。不过在手机上运行时布局似乎有些问题。  好了，不扯远了，这次的demo又回归了ImageParticle，相信大家都不陌生了。这个demo应该比上一个要轻松，我们来看看吧： 依旧是熟悉的选择框：  （1）All at once 这个例子演示了一群旋转的小熊。下面有一行话，“QML这么叼你敢信吗...”  确实是五彩缤纷哈，怎么来形成多彩的效果呢？可能你马上会想到ImageParticle中的colorVariation这个属性，将这个值设高不就能形成多彩的效果吗？确实不错，但是如果我们要求这个小熊只在几种颜色之间变化呢？例如橘红，红色，青色，绿色，和黄色？或者再多一点，连随机数取值也不好做？那么ImageParticle为我们提供了一个属性colorTable，这个属性使得我们可以在一个一维纹理中取出颜色值赋予图像。我们通过自定义一个合适的一维图像就可以决定小熊的颜色了。 这里我将colorVariation设置为1，可以看下对比效果：  可以看到颜色确实更加丰富，但由于本身的一维图像是带有透明度的，想要模仿原例的效果，我们还需要设置透明度： 这里将alpha设置为0.5：  好了，代码很简单，说了这么多，就不讲了哈。allatonce.qml: ~~~ import QtQuick 2.0 import QtQuick.Particles 2.0 Rectangle { color: "white" width: 640 height: 480 ParticleSystem { id: sys } ImageParticle { // ![0] sprites: [ Sprite { name: "bear" source: "qrc:/images/bear_tiles.png" frameCount: 13 frameDuration: 120 } ] colorVariation: 0.5 rotationVelocityVariation: 360 colorTable: "qrc:/images/colortable.png" // ![0] system: sys } Friction { factor: 0.1 system: sys } Emitter { system: sys anchors.centerIn: parent id: particles emitRate: 200 lifeSpan: 6000 velocity: AngleDirection {angleVariation: 360; magnitude: 80; magnitudeVariation: 40} size: 60 endSize: 120 } Text { x: 16 y: 16 text: "QML..." style: Text.Outline; styleColor: "#AAAAAA" font.pixelSize: 32 } Text { anchors.bottom: parent.bottom anchors.right: parent.right anchors.margins: 16 text: "... can you be trusted with the power?" style: Text.Outline; styleColor: "#AAAAAA" font.pixelSize: width > 400 ? 32 : 16 } } ~~~ 我将colortable的图贴在下面： “”  < - 就在这里。它纵向只有一个像素，很窄。 （2）Colored 这个例子展示了两种星星的效果。  colored.qml: ~~~ import QtQuick 2.0 import QtQuick.Particles 2.0 Rectangle { width: 360 height: 540 color: "black" ParticleSystem { anchors.fill: parent ImageParticle { // 背景星星 groups: ["stars"] anchors.fill: parent source: "qrc:///particleresources/star.png" } Emitter { group: "stars" emitRate: 800 lifeSpan: 2400 size: 24 sizeVariation: 8 anchors.fill: parent // 布满父对象的背景星星 } // ![0] ImageParticle { // 没有定义的group默认为"" anchors.fill: parent source: "qrc:///particleresources/star.png" alpha: 0 alphaVariation: 0.2 // 多彩与透明效果 colorVariation: 1.0 } // ![0] Emitter { // 默认发射group名为""的粒子 anchors.centerIn: parent emitRate: 400 lifeSpan: 2400 size: 48 sizeVariation: 8 velocity: AngleDirection {angleVariation: 180; magnitude: 60} // 180的变化度，即是(-180,180) } Turbulence { // 最后添加一些气流效果 anchors.fill: parent strength: 2 } } } ~~~ （3）Color Table 从名字可以知道这里例子着重介绍了colorTable这个属性。  可以看到3个光束以类似∞的轨迹运行，colortable.qml: ~~~ Rectangle { id: root width: 360 height: 540 color: "black" ParticleSystem { id: particles } ImageParticle { system: particles colorVariation: 0.5 alpha: 0 //! [0] source: "qrc:///particleresources/glowdot.png" colorTable: "qrc:/images/colortable.png" // 这个与例子一相同 sizeTable: "qrc:/images/colortable.png" // 有意思的是，我们可以使用这个一维图像的透明度来决定粒子的尺寸，根据Manual所说，这个属性将在之后被移除，取而代之的是使用自定义的缓和曲线 //! [0] } Emitter { system: particles emitRate: 500 lifeSpan: 2000 y: root.height / 2 + Math.sin(t * 2) * root.height * 0.3 // 定义了一个类似∞的轨迹，删掉t中的2，它将变成一个椭圆 x: root.width / 2 + Math.cos(t) * root.width * 0.3 property real t; NumberAnimation on t { from: 0; to: Math.PI * 2; duration: 10000; loops: Animation.Infinite } velocityFromMovement: 20 velocity: PointDirection { xVariation: 5; yVariation: 5;} // 有一定的四周消散能力 acceleration: PointDirection { xVariation: 5; yVariation: 5;} size: 16 //endSize: 8 //sizeVariation: 8 } } ~~~ 关于为什么会形成3个光束：这里的粒子实际上是按轨迹不断生成的，新的粒子产生，旧的粒子还未消散，形成了一条光束。而这些粒子随着生命周期的变化，其颜色、透明度以及尺寸都是与这个colortable一维图像相关的，这个图像我在上面贴出来了，其中间几段有很明显的透明区域，当粒子达到与之相对应的生命周期，我们也就看不到了，随着生命周期的推进，它们又以其他的颜色展现出来。 （4）Deformation 这一节主要介绍了ImageParticle的变形，主要是旋转以及伸缩。上面两排海星星在旋转，下面的海星星被压缩。  deformation.qml: ~~~ import QtQuick 2.0 import QtQuick.Particles 2.0 Rectangle { color: "goldenrod" width: 400 height: 400 ParticleSystem {id:sys} //! [spin] ImageParticle { system: sys groups: ["goingLeft", "goingRight"] source: "qrc:/images/starfish_4.png" rotation: 90 // (顺时针)旋转90度 rotationVelocity: 90 // 旋转速度 autoRotation: true // 定义该属性使粒子能根据运动轨迹自动旋转，这里是平移所以看不到效果 } //! [spin] //! [deform] ImageParticle { system: sys groups: ["goingDown"] source: "qrc:/images/starfish_0.png" // 换了一张图，这个星星不开心些 rotation: 180 // 旋转180度，倒过来了 yVector: PointDirection { y: 0.5; yVariation: 0.25; xVariation: 0.25; } // yVector参数是一个矢量，也就是说我们不仅可以压缩这个图像，还能使它任意拉伸（想象我们拉住一个四边形的两个角任意拉扯的效果）。 } //! [deform] Timer { running: true // 几个定时器用来发射粒子 repeat: false interval: 100 onTriggered: emitA.enabled = true; } Timer { running: true repeat: false interval: 4200 onTriggered: emitB.enabled = true; } Timer { running: true repeat: false interval: 8400 onTriggered: emitC.enabled = true; } Emitter { //　发射器，如果不清楚可以参考前面的博文 id: emitA x: 0 y: 120 system: sys enabled: false group: "goingRight" velocity: PointDirection { x: 100 } lifeSpan: 4000 emitRate: 1 size: 128 } Emitter { id: emitB x: 400 y: 240 system: sys enabled: false group: "goingLeft" velocity: PointDirection { x: -100 } lifeSpan: 4000 emitRate: 1 size: 128 } Emitter { id: emitC x: 0 y: 360 system: sys enabled: false group: "goingDown" velocity: PointDirection { x: 100 } lifeSpan: 4000 emitRate: 1 size: 128 } } ~~~ （5）Rotation 我们在上一节中就接触到了rotation，在那个里面rotation用来实现了图片的旋转动画，而这个例子则主要介绍了它的autoRotation - 自动转向。 先看看效果：  首先是一串从中下向四周发散的海星星，如果屏幕被点击，这些海星星将按其运行轨迹翻转，保证对每个轨迹而言都是正的。 rotation.qml: ~~~ import QtQuick 2.0 import QtQuick.Particles 2.0 Rectangle { color: "goldenrod" width: 1000 height: 1000 ParticleSystem {id: sys} ImageParticle { id: up system: sys source: "qrc:/images/starfish_2.png" autoRotation: true // 这个属性我们前面有谈，再形象一点的话，如果海星星做圆周运动，它的脚会始终指向圆心 rotation: -90 // 粒子在自动旋转后会再加上这个旋转量，那么就得到了图中海星星对每个运动方向都为正的效果 } Emitter { anchors.centerIn: parent system: sys emitRate: 10 size: 200 lifeSpan: 10000 velocity: AngleDirection {angleVariation: 360; magnitudeVariation: 100;} } MouseArea { anchors.fill: parent // 实现鼠标点击功能 onClicked: { up.autoRotation = !up.autoRotation up.rotation = up.autoRotation ? -90 : 0 } } } ~~~ （6）Sharing 由名字我们就可以猜出一些端倪，这个例子向我们展示了如何在同一个或是同一类粒子中展示不同的ImageParticle的效果。同时，一个粒子中还能够包含多个ImageParticle中定义的属性。 由于原例中的文字是白色的，截图看不太清楚，我把它改成了蓝色。不过这并不影响，我们关注的是它的“小花”（粒子）。  可以看到小花在整个屏幕中都是偏白色，而在我们选中项的高亮中它显示为黑红色。并且它是随着进入的部分而部分变换，这在实际使用中相当常用。 另外还有些listView的操作与动画，但这就不是我们这一节重点啦~ sharing.qml: ~~~ // This example shows how to create your own highlight delegate for a ListView // that uses a SpringAnimation to provide custom movement when the // highlight bar is moved between items. import QtQuick 2.0 import QtQuick.Particles 2.0 Rectangle { property real delegateHeight: 65 width: 200; height: 300 gradient: Gradient { GradientStop { position: 0.0; color: "#EEEEFF" } GradientStop { position: 1.0; color: "lightblue" } } // Define a delegate component. A component will be // instantiated for each visible item in the list. Component { // 我们需要为listView的每个可视项目创建一个组件，定义一个组件就类似定义了一个qml文件，这个文件名就是petDelegate.qml，Item是它的根目录。组件中定义的可视化对象不会被直接渲染，除非它被其他类型所加载。 id: petDelegate // 在Item外我们只能定义这个id名 Item { // Item作为这个可视化组件的根目录 id: wrapper width: 200; height: delegateHeight z: 10 Column { Text {color: "blue"; text: name; font.pixelSize: 18 } // 按列排放的文字 Text {color: "blue"; text: 'Type: ' + type; font.pixelSize: 14 } Text {color: "blue"; text: 'Age: ' + age; font.pixelSize: 14 } } MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = index; } // 被点击则作为当前对象 // indent the item if it is the current item states: State { name: "Current" // 设置一个当前状态 when: wrapper.ListView.isCurrentItem PropertyChanges { target: wrapper; x: 20 } // x缩进20 } transitions: Transition { NumberAnimation { properties: "x"; duration: 200 } // 为这个缩进添加一个动画 } } } // Define a highlight with customized movement between items. Component { // 将高亮显示框也定义为一个组件 id: highlightBar Rectangle { // Rectangle作为根目录 z: 0 width: 200; height: delegateHeight gradient: Gradient { GradientStop { position: 0.0; color: "#99FF99" } GradientStop { position: 1.0; color: "#88FF88" } } y: listView.currentItem.y; // y坐标与当前项目坐标一致 Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } // 为 y 的改变添加一个弹簧动画 //! [1] ImageParticle { // 高亮框内的ImageParticle anchors.fill: parent system: particles source: "qrc:/images/flower.png" color: "red" clip: true alpha: 1.0 } //! [1] } } ListView { id: listView width: 200; height: parent.height model: petsModel // 指定模型 delegate: petDelegate // 指定委托对象 focus: true // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem // to false so the highlight delegate can control how the highlight is moved. highlight: highlightBar // 指定highlight委托对象 highlightFollowsCurrentItem: false // 由于我们要实现自定义的highlight动画，因此将该属性设置为false ParticleSystem { id: particles } // ParticleSystem Emitter { // Emitter system: particles anchors.fill: parent emitRate: 0 lifeSpan: 10000 size: 24 sizeVariation: 8 velocity: AngleDirection { angleVariation: 360; magnitude: 3 } maximumEmitted: 10 startTime: 5000 // 这个属性我们之前接触过了，它使Emitter被加载使直接显示5秒后的效果 Timer { running: true; interval: 10; onTriggered: parent.emitRate = 1; } } //! [0] ImageParticle { // 通用粒子，它覆盖了整个ListView，因此Emitter发射的粒子大部分通过它渲染 anchors.fill: parent // 但是当Emitter发射的粒子在高亮区域中时，它将转而使用highlight中的ImageParticle system: particles // 因此粒子颜色与透明度都被改变了 source: "qrc:/images/flower.png" // 但由于highlight中的ImageParticle中的rotation未被设置 alpha: 0.1 // 因此粒子将继续采用此处的rotationVariation: 180 color: "white" // 这也就是ImageParticle中的属性共享 rotationVariation: 180 z: -1 } //! [0] } ListModel { // 为ListView提供数据 id: petsModel ListElement { name: "Polly" type: "Parrot" age: 12 size: "Small" } ListElement { name: "Penny" type: "Turtle" age: 4 size: "Small" } ListElement { name: "Warren" type: "Rabbit" age: 2 size: "Small" } ListElement { name: "Spot" type: "Dog" age: 9 size: "Medium" } ListElement { name: "Schrödinger" type: "Cat" age: 2 size: "Medium" } ListElement { name: "Joey" type: "Kangaroo" age: 1 size: "Medium" } ListElement { name: "Kimba" type: "Bunny" age: 65 size: "Large" } ListElement { name: "Rover" type: "Dog" age: 5 size: "Large" } ListElement { name: "Tiny" type: "Elephant" age: 15 size: "Large" } } } ~~~ （7）Sprites sprites大家都不陌生了，我们在前面的程序中大量接触到了这个东西。使用它要比使用GIF节省多得多的性能，并且与粒子系统一同工作，能够创造动态性能相当高的应用程序。  可以看到下面有只会动的小熊，上方掉落的海星星也在不断变化着表情。当下落到小熊附近时，它们将变成萌萌哒的"惊喜"表情。 sprites.qml: ~~~ import QtQuick 2.0 import QtQuick.Particles 2.0 Rectangle { color: "lightsteelblue" width: 800 height: 800 id: root SpriteSequence { // 该类型提供了一个机遇sprite的动画 sprites: Sprite { name: "bear" source: "qrc:/images/bear_tiles.png" // 图片贴在下方 frameCount: 13 frameDuration: 120 } width: 250 // 定义小熊的位置与层次 height: 250 x: 20 anchors.bottom: parent.bottom anchors.bottomMargin: 20 z:4 } ParticleSystem { id: sys } ImageParticle { anchors.fill: parent id: particles system: sys sprites: [Sprite { // 定义各种状态的海星星，并等概率相互转换 name: "happy" source: "qrc:/images/starfish_1.png" frameCount: 1 frameDuration: 260 to: {"happy": 1, "silly": 1, "angry": 1} }, Sprite { name: "angry" source: "qrc:/images/starfish_0.png" frameCount: 1 frameDuration: 260 to: {"happy": 1, "silly": 1, "angry": 1} }, Sprite { name: "silly" source: "qrc:/images/starfish_2.png" frameCount: 1 frameDuration: 260 to: {"happy": 1, "silly": 1, "noticedbear": 0} }, Sprite { // 在通常情况下，"noticedbear"状态无法达到 name: "noticedbear" source: "qrc:/images/starfish_3.png" frameCount: 1 frameDuration: 2600 }] } Emitter { // 海星星的发射器 system: sys emitRate: 2 lifeSpan: 10000 velocity: AngleDirection {angle: 90; magnitude: 60; angleVariation: 5} acceleration: PointDirection { y: 10 } size: 160 sizeVariation: 40 width: parent.width height: 100 } SpriteGoal { // 最后定义一个SpriteGoal使海星星在运动到矩形的左下部分时跳转到"noticedbear"状态 system: sys width: root.width; height: root.height/2; y: root.height/2; goalState:"noticedbear" } } ~~~ 这里将小熊的sprite图贴下：