颜色函数
优质
小牛编辑
145浏览
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
)。
返回值:
应当渐变到的颜色值