鸿蒙颜色渐变：让你的应用与众不同

前言

颜色渐变 是ArkUI框架中一种非常有用的技术，它可以让开发者使用纯代码创建出各种美丽的颜色渐变效果。颜色渐变 可以应用在任何需要使用颜色渐变的场景，因此也非常常用。对于鸿蒙系统的学习者来说，掌握颜色渐变的相关语法是非常重要的。

ArkUI支持的颜色渐变效果

首先，了解一下目前ArkUI支持的颜色渐变效果。

1.线性渐变（linearGradient）

2.角度渐变（sweepGradient）

3.径向渐变（radialGradient）

了解颜色渐变的颜色描述

在颜色渐变 中，colors 参数为渐变的颜色描述，它是一个数组类型 ，你可以添加多种颜色来实现一个颜色渐变的效果。其中，ResourceColor 表示填充的颜色，number 表示指定颜色所处的位置，取值范围为[0,1.0]，0 表示需要设置渐变色的容器的开始处，1.0表示容器的结尾处。例如，你可以使用如下的代码来指定渐变的颜色。

ini 复制代码

colors:[
    [0xff0000,0.0],[0x00ff00,0.5],[0x0000ff,1.0]
]

在上面的代码中，我们指定颜色渐变从红色开始，以蓝色结尾，在中间插入绿色。效果如下图所示。

注意：想要实现多个颜色渐变效果时，多个数组中number参数建议递增设置，如后一个数组number参数比前一个数组number小的话，按照等于前一个数组number的值处理。

了解linearGradient线性渐变

现在，我们先从最简单的线性渐变学起。

我们从最简单的实现一个自上而下，从红色到蓝色的渐变开始。代码如下：

ini 复制代码

.linearGradient({
 colors:[
     [0xff0000,0.0],[0x0000ff,1.0]
 ]
})

在上面的代码中，我们实现一个从上到下的线性渐变，在linearGradient属性中我们使用的默认设置，当我们不设置angle （起始角度）或direction（方向）时，默认的是自上而下的渐变。如下图所示。

如果渐变方向是自上而下的，就无须专门指定angle 或direction。如果是其他渐变方向，则需要指定。代码如下：

css 复制代码

.linearGradient({
    direction: GradientDirection.Right,
    colors:[
        [0xff0000,0.0],[0x0000ff,1.0]
    ]
})

或者

ini 复制代码

.linearGradient({
    angle: 90,
    colors:[
        [0xff0000,0.0],[0x0000ff,1.0]
    ]
})

在linearGradient 属性中有两种表示方式，一种是指定angle 参数设置渐变的起始角度，另一种是指定direction参数设置渐变的方向。此时，就实现从左到右的线性渐变，如下图所示。

在开发中，更多使用指定direction参数的表示方法。不仅语意清晰，容易理解；而且渐变效果要么是水平或垂直，要么就是对角线。

使用direction参数的表示方法实现的渐变不会受到组件尺寸的限制，也无须计算角度。

例如，我们可以指定direction 参数的值为GradientDirection.RightBottom，来实现从左上角到右下角的线性渐变。代码如下：

css 复制代码

.linearGradient({
    direction: GradientDirection.RightBottom,
    colors:[
        [0xff0000,0.0],[0x0000ff,1.0]
    ]
})

使用direction参数实现对角线渐变，不会受到组件大小的限制，能够适配任意大小的组件。如下图所示。

注意：线性渐变的方向，设置angle后不生效。

在渐变中还可以插入其他颜色，代码如下：

ini 复制代码

.linearGradient({
    direction: GradientDirection.Right,
    colors:[
        [0xff0000,0.0],[0x00ff00,0.5],[0x0000ff,1.0]
    ]
})

在上面的代码中，我们在0.5 的位置上添加了绿色，效果如下图所示。

最后，在linearGradient 属性中使用repeating参数可以设置重复着色。代码如下：

php 复制代码

.linearGradient({
    repeating:true,
    direction: GradientDirection.Right,
    colors:[
        [0xff0000,0.0],[0x00ff00,0.3],[0x0000ff,0.5]
    ]
})

repeating参数，默认为false，设置为true后，可以实现重复着色的效果。如下图所示。

注意：数组末尾元素占比小于1时满足重复着色效果

了解sweepGradient角度渐变

了解线性渐变，接下来我们要学习角度渐变 。 角度渐变的使用还是比线性渐变简单不少，如下代码：

php 复制代码

.sweepGradient({
    center: [100,100],
    start: 0,
    end: 360,
    colors:[
        [0xff0000,0.0],[0x0000ff,1.0]
    ]
})

在上面的代码中，center 参数指定角度渐变的中心点坐标，start 和end 参数指定起始角度，colors参数设置渐变的颜色描述。效果如下图所示。

现在，我们实现了一个简单的角度渐变 效果。我们可以改变起始角度和中心位置，让角度渐变的效果发生变化。如下图所示。

我们将中心位置移动到[50,50]的位置，渐变的起始角度变成90度。

在角度渐变 中，我们可以使用rotation参数来指定旋转角度。如下图所示。

设置了旋转角度后，角度渐变最后的效果起点就不再是90度了。

在sweepGradient 属性中使用repeating参数可以设置重复着色。代码如下：

php 复制代码

.sweepGradient({
center: [100,100],
    start: 90,
    end: 180,
    repeating: true,
    colors:[
        [0xff0000,0.0],[0x0000ff,0.5]
    ]
})

repeating参数，默认为false，设置为true后，可以实现重复着色的效果。如下图所示。

注意：数组末尾元素占比小于1时满足重复着色效果

了解radialGradient径向渐变

径向渐变 是指从一个中心点向四周扩散的渐变效果，在ArkUI 中使用radialGradient 属性表示径向渐变。实现径向渐变还是比较简单的。

首先，我们创建一个简单的径向渐变，代码如下：

ini 复制代码

.radialGradient({
    center: [100,100],
    radius: 160,
    colors:[
        [0xff0000,0.0],[0x00ff00,0.3],[0x0000ff,0.5]
    ]
})

在上面的代码中，center 参数指定径向渐变的中心点坐标，radius 参数指定渐变的半径，colors参数设置渐变的颜色描述。效果如下图所示。

径向渐变都是围绕设置渐变的半径，中心点坐标，以及颜色描述展开的。可以理解为从一个小圆到一个大圆的渐变。

在radialGradient 属性中使用repeating参数可以设置重复着色。代码如下：

php 复制代码

.radialGradient({
    center: [100,100],
    radius: 160,
    repeating: true,
    colors:[
        [0xff0000,0.0],[0x00ff00,0.3],[0x0000ff,0.5]
    ]
})

repeating参数，默认为false，设置为true后，可以实现重复着色的效果。如下图所示。

注意：数组末尾元素占比小于1时满足重复着色效果

总结

在 ArkUI 中，颜色渐变包括线性渐变 、角度渐变 和径向渐变 。它们都能为设计带来独特的视觉效果，使页面更加生动和吸引人。通过使用这些渐变，我们可以创造出各种令人惊叹的效果，提升用户体验。颜色渐变都是 ArkUI 中强大而灵活的工具。