目录
当前位置: 首页 > 文档资料 > BindingX 中文文档 >

颜色函数

优质
小牛编辑
135浏览
2023-12-01

本文向您介绍如何实现颜色渐变效果,即改变视图的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)。

    • 返回值:

      • 应当渐变到的颜色值