# 其他属性和动画

# 基于不同RenderMode的渲染

RenderMode不进行设置的前提下, 无论相机如何的转动，所有粒子永远正对着屏幕。

这里通过render-mode字段进行控制，示例如下：

<xr-particle id="colorGradient" position="2 0 -2" render-mode="off" capacity="20" emit-rate="5" life-time="3" emitter-type="BoxShape"></xr-particle>

# RenderMode字段相关变量介绍

名称	备注
off	是否启用Billboard渲染
default	默认Billboard渲染模式，粒子始终正对屏幕
y	Y轴渲染模式，粒子Y轴将锁定, 其它轴的显示正对屏幕
stretched	拉伸渲染模式，将附带一些旋转，使粒子朝向其运动方向
mesh	粒子将以指定网格渲染，与粒子系统中的mesh字段搭配

可以通过代码调用禁用Billboard渲染，粒子将保持它自己的位置，面片的显示不会随着相机旋转而进行调整：

  particleComponent.useBillBoard = false

要设定Billboard模式，首先要启用useBillBoard，并对billboardMode进行设置，这里以"BILLBOARDMODE_Y"为例

  particleComponent.useBillBoard = true
  particleComponent.billboardMode = BillBoardMode.BILLBOARDMODE_Y || 1

# 支持色彩取样构建

粒子系统目前支持基于alpha值，在色彩梯度渐变图上进行采样, 从而更改粒子的颜色, 要启用此功能，首先将useRampGradients置为true

通过如下示例，构建自定义色彩取样表

  particleComponent.useRampGradient = true;
  particleComponent.addRampGradient(0.0, Vector3.createFromNumber(1, 1, 1));
  particleComponent.addRampGradient(0.2, Vector3.createFromNumber(0.8, 0.8, 0.05));
  particleComponent.addRampGradient(0.4, Vector3.createFromNumber(0.86, 0.5, 0.05));
  particleComponent.addRampGradient(0.6, Vector3.createFromNumber(0.75, 0.18, 0.07));
  particleComponent.addRampGradient(0.8, Vector3.createFromNumber(0.45, 0.08, 0.06));
  particleComponent.addRampGradient(1, Vector3.createFromNumber(0.05, 0.05, 0.05));

最终粒子将根据自身alpha值，在取样表中采取对应的色彩。

通过如下示例，也可以在生命周期的不同阶段，指定alpha值的变化范围，影响对色彩渐变图的采样。

例如：0.2s时，,因为此时的采样范围为[0.1,0.8], 粒子alpha<=0.1视值为0, 当>=0.8时视值为1, 在区间内值映射为(alpha-0.1)/0.8

  particleComponent.addColorRemapGradient(0, 0, 0.1);
  particleComponent.addColorRemapGradient(0.2, 0.1, 0.8);
  particleComponent.addColorRemapGradient(0.3, 0.2, 0.85);

名称	类型	备注	默认值
useRampGradients	boolean	是否启用色彩梯度取样	false

# 相关方法

# `addRampGradient`

名称	类型	备注
gradient	number	在指定位置设置对应色彩, 该值与（1-粒子alpha值）对应，取值范围[0~1]
color	Vector3	色彩RGB值

# `addColorRemapGradient`

名称	类型	备注
time	number	指定粒子生命周期的阶段
min	number	alpha值左区间
max	number	alpha值右区间

# 粒子属性的动态变化

粒子在运动过程中，可以定制对其大小、颜色、速度的动态变化。

本粒子系统同时内置有关粒子大小的控制方法addSizeGradient，用法如下：

  particleComponent.addSizeGradient(0,1);
  particleComponent.addSizeGradient(0.5,0.8);
  particleComponent.addSizeGradient(0.75,0.3,0.5);
  particleComponent.addSizeGradient(1,0);

调用addColorGradient支持带有alpha通道的颜色过渡：

    particleComponent.addColorGradient(0, Vector4.createFromNumber(1,1,1,0));
    particleComponent.addColorGradient(0.3, Vector4.createFromNumber(0.3,1,1,0.5),Vector4.createFromNumber(0.2,0,0.6,0.5),);
    particleComponent.addColorGradient(1, Vector4.createFromNumber(0,1,1,1));

调用addAlphaGradient可以专门调整透明度的过渡：

    particleComponent.addAlphaGradient(0,0);
    particleComponent.addAlphaGradient(0.3,0.3, 0.5);
    particleComponent.addAlphaGradient(1,1);

调用addSpeedScaleGradient动态改变粒子运动过程中的速度大小：

    particleComponent.addSpeedScaleGradient(0,0);
    particleComponent.addSpeedScaleGradient(0.3,0.5, 1);
    particleComponent.addSpeedScaleGradient(1,2);

# 相关方法

# `addSizeGradient`

参数	类型	描述
gradient	number	指定所处粒子生命周期的阶段
sizeScale	number	指定粒子大小的左区间
sizeScale2	number	指定粒子大小的右区间[可选]

其中gradient统一取值范围为[0,1]间，表示相对粒子生命周期的占比，如0.1,即指定粒子在0.1 * lifeTime的时刻；sizeScale与sizeScale2值的大小为相对于粒子系统属性中 scale配置的值，如sizeScale为2,则粒子体积大小为size * 2

# `addColorGradient`

参数	类型	描述
gradient	number	指定所处粒子生命周期的阶段
color	Vector4	指定粒子颜色的左区间
color2	Vector4	指定粒子颜色的右区间[可选]

# `addAlphaGradient`

参数	类型	描述
gradient	number	指定所处粒子生命周期的阶段
alpha	number	指定粒子颜色透明度的左区间
alpha2	number	指定粒子颜色透明度的右区间[可选]

# `addSpeedScaleGradient`

参数	类型	描述
gradient	number	指定所处粒子生命周期的阶段
speedScale	number	指定粒子速度的左区间
speedScale2	number	指定粒子速度的右区间[可选]

speedScale与speedScale2值的大小为相对于粒子系统属性中 speed配置的值，如speedScale为2,则粒子速度大小为speed * s2

# 动画粒子

首先我们需要创建一个图集资源，如实例所示，命名此资源名为"particle-atlas":

    <xr-asset-load type="atlas" asset-id="particle-atlas" src="/path/to/atlas.json" />
    <xr-particle capacity="100" size="2" emit-rate="12" life-time="4" angle="0 360" atlas="particle-atlas" atlas-frames="frame-name" atlas-speed="4" atlas-random="true" atlas-loop="true"></xr-particle>

粒子将从图集依次序取出对应纹理样式进行渲染

atlas-random：决定默认的纹理从第一张开始或者是随机
atlas-frames：指定图集中特定的纹理名字参与渲染
atlas-speed：将控制纹理的变化速度
atlas-loop：决定当轮转到图集最后一张纹理时，是否回到第一张纹理开始渲染

# 子发射器

目前系统支持构建子发射器，可以通过构建子发射器实现类似的烟花绽放的粒子效果。示例如下，为子发射器构建参数的过程与粒子系统的构建基本一致，可以参考粒子系统的相关参数介绍。

 <xr-asset-load type="texture" asset-id="particlePoint" src="xxx" /> <!-- xxx为纹理的url -->

   var myData ={}
    myData = {
      "capacity": 10,
      "emitRate": 5,
      "size":[0.1],
      "startColor":[1,1,0,1],
      "endColor":[1,1,0,1],
      "emitterType":"SphereShape",
      "emitterProps": [["radius","0.1"]],
      "stopDuration":3,
      "lifeTime":[3],
      "texture":"particlePoint", // xxx为纹理的url
      "speed":[0.5],
    }
    const particleSystemElement = xrScene.getElementById("xxxx"); // xxx为粒子系统的id命名
    tempSystem = particleSystemElement.getComponent(xrFrameSystem.Particle)
    var subEmitter = this.createSubEmitter(myData)
    subEmitter.state = 0
    //可以规定多个子发射器的阵列
    particleComponent.subEmitters = [subEmitter]

如myData的配置所示，调用createSubEmitter创建一个子发射器，具体参数类型参考粒子系统的相关参数介绍:

# 相关属性

SubEmitterState

参数	类型	描述	默认值
ATTACH	number	指定发射器为附加类型	0
END	number	指定发射器为粒子结束时生成	1

SubEmitterState.ATTACH
当一个粒子产生时，从子发射器阵列中随机选择一种并附加到新粒子上，用于在新粒子上创建拖尾粒子效果。

SubEmitterState.END
当粒子灭亡时，从子发射器阵列中随机选择一种进行克隆并渲染，用于在新粒子上创建收尾特效。

# 其他属性和动画

# 基于不同RenderMode的渲染

# RenderMode字段相关变量介绍

# 支持色彩取样构建

# 相关方法

# addRampGradient

# addColorRemapGradient

# 粒子属性的动态变化

# 相关方法

# addSizeGradient

# addColorGradient

# addAlphaGradient

# addSpeedScaleGradient

# 动画粒子

# 子发射器

# 相关属性

# `addRampGradient`

# `addColorRemapGradient`

# `addSizeGradient`

# `addColorGradient`

# `addAlphaGradient`

# `addSpeedScaleGradient`