渐变色编辑器

渐变色编辑器 支持设置粒子系统中部分属性颜色随时间发生渐变。属性默认都是以固定颜色（Color）的形式显示，点击属性框右侧的 menu-button 按钮，可以看到有以下几种编辑模式：

set-color

根据选择的编辑模式不同，属性框的显示也有一定的差异：

  • Color（默认）：设定的颜色在属性整个生命周期内不会发生变化；

    color

  • Gradient：属性切换为渐变色编辑形式，点击属性框即可打开渐变色编辑器。属性的颜色变化由设置的颜色渐变图指定；

    gradient

  • TwoColors：设置的两个固定颜色定义了颜色的上限和下限，实际颜色会随着时间的推移在两个边界之间进行插值；

    two-colors

  • TwoGradients：两个渐变图定义了属性颜色在生命周期内某一点的渐变上限和下限，当前颜色在两个边界之间进行插值；

    two-gradients

  • RadomColor：取 Gradient 模式下的渐变图中的随机颜色。

    radom-color

然后点击属性框，即可打开相应的颜色编辑器。

接下来我们以 Gradient 模式为例，看一下渐变色编辑器具体的操作步骤。

渐变色编辑

选择 Gradient 模式后点击属性框，即可打开渐变色编辑器。初始界面如下：

gradient_editor

可将其大致分为上下两部分，上方的三条色带区域为颜色渐变图，下方区域为颜色选择器。

  • 上方的色带用于插入 Alpha 关键帧；下方的色带用于插入 RGB 关键帧；中间的色带用于显示关键帧影响下的最终颜色，最终颜色的计算方式可在 Mode 选项中设置，详情请参考下文说明。

  • 选中关键帧即可在下方的颜色选择器中设置 Alpha 或 RGB 值。设置时可在左侧直接选择颜色，也可以在右侧通过数值进行设置；

  • 拖动关键帧 上下移动 可以 删除 关键帧。

  • 拖动关键帧 左右移动 可以 调节关键帧位置，也可以在 Location 中通过设置百分比数值进行调节。

    gradient_editor

  • Mode 用于设置渐变色的计算方式，支持以下两种：

    • Blend 模式（默认）：会按照当前时刻相邻的两个关键帧进行插值得到当前帧的颜色；

    • Fixed 模式：会直接使用当前时刻的前一个关键帧颜色，没有渐变。

      编辑器中默认使用 Blend 模式，可通过代码进行切换，代码示例如下：

      1. // 切换为 Fixed 模式
      2. startColor.gradient.mode = Mode.Fixed;
      4. // 切换为 Blend 模式
      5. startColor.gradient.mode = Mode.Blend;