在Ubuntu QML应用中实现Particle特效

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/UbuntuTouch/article/details/50622184
粒子是计算机图形技术,可视化某些图形效果。典型的影响可能是:落叶,火灾,爆炸,流星,云,等。

它不同于其他的图形渲染原因粒子渲染是基于模糊的方面。结果是不能在像素基底准确预测的。参数到粒子系统描述为随机模拟的边界。与粒子渲染的现象,往往很难与传统的渲染技术,可视化。好处是可以让要素QML与粒子系统交互。可以使用传统的动画技术动画通过属性的控制来实现动画效果。


概念


在粒子模拟的心脏是控制共享时间线的ParticleSystem。一个场景可以有几个粒子系统,他们每个人具有独立的时间线。一个粒子是使用Emitter发射并用ParticlePainter来呈现,它可以是图像,QML项。发射器也提供了用于控制粒子向量空间的方向。一旦粒子被发射,它将不再被发射器所控制。粒子模块提供Affector,它用来操控粒子被发射后的行为。
在一个系统中的颗粒可以共享使用ParticleGroup元件定时切换。默认情况下,每一个粒子都是属于是空的('')组。


  • ParticleSystem - manages shared time-line between emitters
  • Emitter - emits logical particles into the system
  • ParticlePainter - particles are visualized by a particle painter
  • Direction - vector space for emitted particles
  • ParticleGroup - every particle is a member of a group
  • Affector - manipulates particles after they have been emitted
一个粒子系统基本是由ParticleSystem、ImageParticle(ParticlePainter)以及Emitter组成的。其中ParticleSystem必不可少,因为这是要控制好各个粒子系统组件的必备类型。如果ParticleSystem是不作为Emitter的父类存在的话,那么Emitter有一个成员system必须要指定ParticleSystem的id。Emitter也是一个必不可少的类,它的作用是规定这些例子以何种方式发射、以及规定粒子的大小和生命周期。而ImageParticle是ParticlePainter的子类,它不是必备的,我们可以采用ParticlePainter的其它子类CustomParticle和ItemParticle来指定。它的作用是规定粒子的图片以及旋转、颜色、透明度等信息。

其实在三者之外,还有一个不可忽视的类,那就是Affector。一般来说,粒子在Emitter作用后会保持初始的速度、加速度和大小进行运动,此后这些数值不再受Emitter控制了,只有Affector才能控制粒子在运行过程中的数值大小。这里Affector只是一个基类,在它的基础上定义出来了很多根据不同效果而定义的子类。比如说Age、Attractor、Friction、Gravity、GroupGoal、SpriteGoal、Turbulence和Wander。

我们先来做一个简单的例子:

Main.qml


import QtQuick 2.0
import QtQuick.Particles 2.0
import Ubuntu.Components 1.1


MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "particle1.liu-xiao-guo"

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("particle1")

        ParticleSystem {
            id: particle
            anchors.fill: parent
            running: true

            ImageParticle {
                anchors.fill: parent
//                source: "qrc:///particleresources/star.png"
                source: "images/starfish_1.png"
                alpha: 0.5
                alphaVariation: 0.2
                colorVariation: 1.0
            }

            Emitter {
                anchors.centerIn: parent
                emitRate: 400
                lifeSpan: 5000
                size: 20
                sizeVariation: 8
                velocity: AngleDirection {angleVariation: 180; magnitude: 60}
            }

            Turbulence {
                anchors.fill: parent
                strength: 2
            }
        }
    }
}

在上面的例子中,我们使用了一个ImageParticle.它继承于ParticlePainter.用来显示每个粒子.我们同时也定义了一个发射器.在里面我们可以定义每个粒子的生命期,大小,方向及大小.运行我们的应用:



我们可以修改上面的例程的一些参数,比如我们修改AngleDirection里的角度就图片.



上面的例程的源码在https://github.com/liu-xiao-guo/particle1. 我们上面的代码也可以使用如下的格式:

    Page {
        title: i18n.tr("particle3")

        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            anchors.centerIn: parent
            anchors.fill: parent
            system: particleSystem
            emitRate: 10
            lifeSpan: 2000
            lifeSpanVariation: 500
            size: 54
            endSize: 32
        }

        ImageParticle {
            source: "images/realLeaf1.png"
            system: particleSystem
        }
    }

这里Emitter不再被ParticleSystem所包含,但是我们必须在里面定义一个叫做system的属性.

我们修改我们上面的例子.我们使用Gravity Affector. 在Gravity中,我们可以使用加速度及角度.整个例程的代码为:


import QtQuick 2.0
import Ubuntu.Components 1.1
import QtQuick.Particles 2.0

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "particle2.liu-xiao-guo"

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("particle2")

        ParticleSystem
        {
            anchors.centerIn: parent
            running: true

            ImageParticle {
                anchors.fill: parent
                // source: "qrc:///particleresources/star.png"
                source: "images/starfish_0.png"
                alpha: 0.5
                alphaVariation: 0.2
                colorVariation: 1.0
            }

            Emitter
            {
                emitRate: 20
                size: 50
                lifeSpan: 5000
                velocity: AngleDirection { magnitude: 100; angleVariation: 360  }
            }

            Gravity
            {
                angle: 90
                magnitude: 100
            }

            Turbulence {
                anchors.fill: parent
                strength: 2
            }
        }
    }
}

运行我们的例程,效果如下:


如上图所示,我们可以看到一种重力的效果.整个项目的源码在 https://github.com/liu-xiao-guo/particle2


展开阅读全文

没有更多推荐了,返回首页