Question

本文向您介绍如何实现颜色渐变效果，即改变视图的background-color。 对于颜色这种类型，它是由r/g/b三个颜色分量控制的，所以要想实现颜色渐变，需要对每个颜色分量做渐变。 您可以使用rgb/rgba函数控制各个颜色分量，比如实现手势横向移动650单位，颜色值从#ff0000渐变到#0000ff，可以用如下表达式:

rgb((1- x / 650) * 255,0,x / 650*255)

当然，您可以使用任意一种事件类型(EventType)而不仅仅是使用手势来驱动颜色变化。

考虑到颜色值通常是以#rrggbb格式书写的，如果要做渐变，先要计算各个颜色分量的int值，较繁琐。因此，我们还提供了一个颜色计算的估值器函数evaluateColor。完成同样效果，使用evaluateColor实现，像下面这样:

evaluateColor('#ff0000','#0000ff',min(x,650)/650)

API

• rgb(r, g, b)

  • 入参:

    • r: 红色分量

    • g: 绿色分量

    • b: 蓝色分量

  • 返回值:

    • Void

• rgba(r, g, b, a)

  • 入参:

    • r: 红色分量

    • g: 绿色分量

    • b: 蓝色分量

    • a: 透明度分量

  • 返回值:

    • Void

• evaluateColor(startColor, endColor, fraction)

  • 入参:

    • startColor: 颜色起始值(String类型)。如#00ff00

    • endColor: 颜色结束值(String类型)。如#0000ff

    • fraction: 进度(Double类型，范围是0.0~1.0)。如在动画场景下，即(min(t,duration)/duration)。

  • 返回值:

    • 应当渐变到的颜色值