1. 粒子方向(Directed Particle)

我们已经看到了粒子的旋转,但是我们的粒子需要一个轨迹。轨迹由速度或者粒子随机方向的加速度指定,也可以叫做矢量空间。

有多种可用矢量空间用来定义粒子的速度或加速度:

  • 角度方向(AngleDirection)- 使用角度的方向变化。

  • 点方向(PointDirection)- 使用x,y组件组成的方向变化。

  • 目标方向(TargetDirection)- 朝着目标点的方向变化。

让我们在场景下试着用速度方向将粒子从左边移动到右边。

首先使用角度方向(AngleDirection)。我们使用AngleDirection元素作为我们的发射器(Emitter)的速度属性:

velocity: AngleDirection { }

粒子的发射将会使用指定的角度属性。角度值在0到360度之间,0度代表指向右边。在我们的例子中,例子将会移动到右边,所以0度已经指向右边方向。粒子的角度变化在+/-15度之间:

velocity: AngleDirection {
    angle: 0
    angleVariation: 15
}

现在我们已经设置了方向,下面是指定粒子的速度。它由一个梯度值定义,这个梯度值定义了每秒像素的变化。正如我们设置大约640像素,梯度值为100,看起来是一个不错的值。这意味着平均一个6.4秒生命周期的粒子可以穿越我们看到的区域。为了让粒子的穿越看起来更加有趣,我们使用magnitudeVariation来设置梯度值的变化,这个值是我们的梯度值的一半:

velocity: AngleDirection {
    ...
    magnitude: 100
    magnitudeVariation: 50
}

下面是完整的源码,平均的生命周期被设置为6..4秒。我们设置发射器的宽度和高度为1个像素,这意味着所有的粒子都从相同的位置发射出去,然后基于我们给定的轨迹运动。

    Emitter {
        id: emitter
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: 1; height: 1
        system: particleSystem
        lifeSpan: 6400
        lifeSpanVariation: 400
        size: 32
        velocity: AngleDirection {
            angle: 0
            angleVariation: 15
            magnitude: 100
            magnitudeVariation: 50
        }
    }

那么加速度做些什么?加速度是每个粒子加速度矢量,它会在运动的时间中改变速度矢量。例如我们做一个星星按照弧形运动的轨迹。我们将会改变我们的速度方向为-45度,然后移除变量,可以得到一个更连贯的弧形轨迹:

velocity: AngleDirection {
    angle: -45
    magnitude: 100
}

加速度的方向为90度(向下),加速度为速度的四分之一:

acceleration: AngleDirection {
    angle: 90
    magnitude: 25
}

结果是中间左方到右下的一个弧。

这个值是在不断的尝试与错误中发现的。

下面是发射器完整的代码。

    Emitter {
        id: emitter
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: 1; height: 1
        system: particleSystem
        emitRate: 10
        lifeSpan: 6400
        lifeSpanVariation: 400
        size: 32
        velocity: AngleDirection {
            angle: -45
            angleVariation: 0
            magnitude: 100
        }
        acceleration: AngleDirection {
            angle: 90
            magnitude: 25
        }
    }

在下一个例子中,我们将使用点方向(PointDirection)矢量空间来再一次演示粒子从左到右的运动。

一个点方向(PointDirection)是由x和y组件组成的矢量空间。例如,如果你想粒子以45度的矢量运动,你需要为x,y指定相同的值。

在我们的例子中,我们希望粒子在从左到右的例子中建立一个15度的圆锥。我们指定一个坐标方向(PointDirection)作为我们速度矢量空间:

velocity: PointDirection { }

为了达到运动速度每秒100个像素,我们设置x为100,。15度角(90度的1/6),我们指定y变量为100/6:

velocity: PointDirection {
    x: 100
    y: 0
    xVariation: 0
    yVariation: 100/6
}

结果是粒子的运动从左到右构成了一个15度的圆锥。

现在是最后一个方案,目标方向(TargetDirection)。目标方向允许我们指定发射器或者一个QML项的x,y坐标值。当一个QML项的中心点成为一个目标点时,你可以指定目标变化值是x目标值的1/6来完成一个15度的圆锥:

velocity: TargetDirection {
    targetX: 100
    targetY: 0
    targetVariation: 100/6
    magnitude: 100
}

注意

当你期望发射粒子朝着指定的x,y坐标值流动时,目标方向是非常好的方案。

我没有再贴出结果图,因为它与前一个结果相同,取而代之的有一个问题留给你。

在下图的红色和绿色圆指定每个目标项的目标方向速度的加速属性。每个目标方向有相同的参数。那么哪一个负责速度,哪一个负责加速度?

results matching ""

    No results matching ""