粒子方向（Directed Particle）

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

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

  • 角度方向（AngleDirection）- 使用角度的方向变化。

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

  • 目标方向（TargetDirection）- 朝着目标点的方向变化。

粒子方向（Directed Particle） - 图1

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

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

  1. velocity: AngleDirection { }

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

  1. velocity: AngleDirection {
  2.     angle: 0
  3.     angleVariation: 15
  4. }

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

  1. velocity: AngleDirection {
  2.     ...
  3.     magnitude: 100
  4.     magnitudeVariation: 50
  5. }

粒子方向（Directed Particle） - 图2

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

  1.     Emitter {
  2.         id: emitter
  3.         anchors.left: parent.left
  4.         anchors.verticalCenter: parent.verticalCenter
  5.         width: 1; height: 1
  6.         system: particleSystem
  7.         lifeSpan: 6400
  8.         lifeSpanVariation: 400
  9.         size: 32
  10.         velocity: AngleDirection {
  11.             angle: 0
  12.             angleVariation: 15
  13.             magnitude: 100
  14.             magnitudeVariation: 50
  15.         }
  16.     }

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

  1. velocity: AngleDirection {
  2.     angle: -45
  3.     magnitude: 100
  4. }

加速度的方向为90度（向下），加速度为速度的四分之一：

  1. acceleration: AngleDirection {
  2.     angle: 90
  3.     magnitude: 25
  4. }

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

粒子方向（Directed Particle） - 图3
这个值是在不断的尝试与错误中发现的。

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

  1.     Emitter {
  2.         id: emitter
  3.         anchors.left: parent.left
  4.         anchors.verticalCenter: parent.verticalCenter
  5.         width: 1; height: 1
  6.         system: particleSystem
  7.         emitRate: 10
  8.         lifeSpan: 6400
  9.         lifeSpanVariation: 400
  10.         size: 32
  11.         velocity: AngleDirection {
  12.             angle: -45
  13.             angleVariation: 0
  14.             magnitude: 100
  15.         }
  16.         acceleration: AngleDirection {
  17.             angle: 90
  18.             magnitude: 25
  19.         }
  20.     }

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

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

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

  1. velocity: PointDirection { }

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

  1. velocity: PointDirection {
  2.     x: 100
  3.     y: 0
  4.     xVariation: 0
  5.     yVariation: 100/6
  6. }

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

粒子方向（Directed Particle） - 图4

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

  1. velocity: TargetDirection {
  2.     targetX: 100
  3.     targetY: 0
  4.     targetVariation: 100/6
  5.     magnitude: 100
  6. }

注意

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

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

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

粒子方向（Directed Particle） - 图5