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

前言

颜色渐变 是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(方向)时,默认的是自上而下的渐变。如下图所示。

如果渐变方向是自上而下的,就无须专门指定angledirection。如果是其他渐变方向,则需要指定。代码如下:

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 参数指定角度渐变的中心点坐标,startend 参数指定起始角度,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 中强大而灵活的工具。

相关推荐
Json_1817901448026 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端