安徽合肥网站制作公司,百度网页版电脑版入口,怎么自己创建一个网页,手表网站模版1、概 述
ArkTs可以通过颜色渐变接口#xff0c;设置组件的背景颜色渐变效果#xff0c;实现在两个或多个指定的颜色之间进行平稳的过渡。
目前提供三种渐变类型#xff1a;线性渐变、角度渐变、径向渐变。
我们在鸿蒙UI布局实战 —— 个人中心页面开发中#xff0c;默认…1、概 述
ArkTs可以通过颜色渐变接口设置组件的背景颜色渐变效果实现在两个或多个指定的颜色之间进行平稳的过渡。
目前提供三种渐变类型线性渐变、角度渐变、径向渐变。
我们在鸿蒙UI布局实战 —— 个人中心页面开发中默认头像部分使用到了线性渐变效果如下 在项目中合理的使用渐变色有助于让我们的APP更加灵动下面对三种渐变效果做讨论。
2、接口定义
三种渐变方式对应的接口如下 线性渐变
linearGradient(value: {angle?: number | string; direction?: GradientDirection; colors: Array[ResourceColor, number]; repeating?: boolean;})
参数说明如下 angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值180角度为字符串时仅支持类型deggradradtrun。 direction: 线性渐变的方向设置angle后不生效。默认值GradientDirection.Bottom colors: 指定某百分比位置处的渐变色颜色,设置非法颜色直接跳过。 repeating: 为渐变的颜色重复着色。默认值false
线性渐变的示例效果如下 角度渐变
sweepGradient(value: {center: [Length, Length]; start?: number | string; end?: number | string; rotation?: number | string; colors: Array[ResourceColor, number]; repeating?: boolean;})
仅绘制0-360度范围内的角度超出时不绘制渐变色只绘制纯色。参数说明如下 center为角度渐变的中心点即相对于当前组件左上角的坐标。 start角度渐变的起点。默认值0角度为字符串时仅支持类型deggradradtrun。 end角度渐变的终点。默认值0角度为字符串时仅支持类型deggradradtrun。 rotation: 角度渐变的旋转角度。默认值0角度为字符串时仅支持类型deggradradtrun。 colors: 指定某百分比位置处的渐变色颜色设置非法颜色直接跳过。 repeating: 为渐变的颜色重复着色。默认值false
说明
设置为小于0的值时按值为0处理设置为大于360的值时按值为360处理。
当start、end、rotation的数据类型为string合法的取值为纯数字或纯数字后带deg(度)、rad(弧度)、grad(梯度)、turn(圈)单位例如90、 90deg、1.57rad。 角度渐变的示例效果如下 径向渐变
radialGradient(value: { center: [Length, Length]; radius: number | string; colors: Array[ResourceColor, number]; repeating?: boolean })
参数说明如下 center径向渐变的中心点即相对于当前组件左上角的坐标。 radius径向渐变的半径。取值范围[0,∞)设置为小于的0值时按值为0处理。 colors: 指定某百分比位置处的渐变色颜色设置非法颜色直接跳过。 repeating: 为渐变的颜色重复着色。默认值false
径向渐变的示例效果如下 3、代码示例 线性渐变代码示例
效果如下 代码如下使用了网格布局一行展示两个效果
EntryComponentstruct LinearGradientDemo { build() { Grid() { GridItem() { Column() { Text(angle: 180) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .linearGradient({ // 0点方向顺时针旋转为正向角度线性渐变起始角度的默认值为180° colors: [ [0xf56c6c, 0.0], // 颜色断点1的颜色和比重对应组件在180°方向上的起始位置 [0xffffff, 1.0], // 颜色断点2的颜色和比重对应组件在180°方向上的终点位置 ] }) } GridItem() { Column() { Text(angle: 45) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .linearGradient({ angle: 45, // 设置颜色渐变起始角度为顺时针方向45° colors: [ [0xf56c6c, 0.0], [0xffffff, 1.0], ] }) } GridItem() { Column() { Text(repeat: true) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .linearGradient({ repeating: true, // 在当前组件内0.3到1.0区域内重复0到0.3区域的颜色渐变效果 colors: [ [0xf56c6c, 0.0], [0xE6A23C, .3], ] }) } GridItem() { Column() { Text(repeat: false) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .linearGradient({ colors: [ [0xf56c6c, 0.0], // repeating默认为false此时组件内只有0到0.3区域内存在颜色渐变效果 [0xE6A23C, .3], ] }) } } .columnsGap(10) .rowsGap(10) .columnsTemplate(1fr 1fr) .rowsTemplate(1fr 1fr 1fr) .width(100%) .height(100%) }} 角度渐变代码示例
效果如下 代码如下
EntryComponentstruct SweepGradientDemo { build() { Grid() { GridItem() { Column() { Text(center: 50) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .sweepGradient({ center: [50, 50], // 角度渐变中心点 start: 0, // 角度渐变的起点 end: 360, // 角度渐变的终点。 repeating: true, // 渐变效果在重复 colors: [ // 当前组件中按照中心点和渐变的起点和终点值, // 角度区域为0-0.125的范围从颜色断点1的颜色渐变到颜色断点2的颜色, // 角度区域0.125到0.25的范围从颜色断点2的颜色渐变到颜色断点3的颜色, // 因为repeating设置为true角度区域0.25到1的范围重复区域0到0.25的颜色渐变效果 [0xf56c6c, 0], // 颜色断点1的颜色和比重对应角度为0*360°0°角点为中心点 [0xffffff, 0.125], // 颜色断点2的颜色和比重 [0x409EFF, 0.25] // 颜色断点3的颜色和比重 ] }) } GridItem() { Column() { Text(center: 0) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .sweepGradient({ center: [0, 0], // 角度渐变中心点当前为组件的左上角坐标 start: 0, end: 360, repeating: true, colors: [ // 当前组件中因为角度渐变中心是组件的左上角所以从颜色断点1到颜色断点3的角度范围恰好可以覆盖整个组件 [0xf56c6c, 0], // 颜色断点1的颜色和比重对应角度为0*360°0° [0xffffff, 0.125], // 色断点2的颜色和比重对应角度为0.125*360°45° [0x409EFF, 0.25] // 色断点3的颜色和比重对应角度为0.25*360°90° ] }) } GridItem() { Column() { Text(repeat: true) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .sweepGradient({ center: [50, 50], start: 0, end: 360, repeating: true, colors: [ [0xf56c6c, 0], [0xffffff, 0.125], [0x409EFF, 0.25] ] }) } GridItem() { Column() { Text(repeat: false) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .sweepGradient({ center: [50, 50], start: 0, end: 360, repeating: false, //只在颜色断点角度覆盖范围内产生颜色渐变效果其余范围内不重复 colors: [ [0xf56c6c, 0], [0xffffff, 0.125], [0x409EFF, 0.25] ] }) } } .columnsGap(10) .rowsGap(10) .columnsTemplate(1fr 1fr) .rowsTemplate(1fr 1fr 1fr) .width(100%) .height(437) }} 径向渐变代码示例
效果如下 代码如下
EntryComponentstruct radialGradientDemo { build() { Grid() { GridItem() { Column() { Text(center: 50) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .radialGradient({ center: [50, 50], // 径向渐变中心点 radius: 100, // 径向渐变半径 repeating: true, // 允许在组件内渐变范围外重复按照渐变范围内效果着色 colors: [ // 组件内以[5050]为中心点在半径为0到12.5的范围内从颜色断点1的颜色渐变到颜色断点2的颜色, // 在半径为12.5到25的范围内从颜色断点2的颜色渐变到颜色断点3的颜色, // 组件外其他半径范围内按照半径为0到25的渐变效果重复着色 [0xf56c6c, 0], // 颜色断点1的颜色和比重对应半径为0*1000 [0xffffff, 0.125], // 颜色断点2的颜色和比重对应半径为0.125*10012.5 [0x409EFF, 0.25] // 颜色断点3的颜色和比重对应半径为0.25*10025 ] }) } GridItem() { Column() { Text(center: 0) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .radialGradient({ center: [0, 0], // 径向渐变中心点当前为组件左上角坐标 radius: 100, repeating: true, colors: [ [0xf56c6c, 0], [0xffffff, 0.125], [0x409EFF, 0.25] ] }) } GridItem() { Column() { Text(repeat: true) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .radialGradient({ center: [50, 50], radius: 100, repeating: true, colors: [ [0xf56c6c, 0], [0xffffff, 0.125], [0x409EFF, 0.25] ] }) } GridItem() { Column() { Text(repeat: false) .fontSize(15) } .width(100) .height(100) .justifyContent(FlexAlign.Center) .borderRadius(10) .radialGradient({ center: [50, 50], radius: 100, repeating: false, // 在组件内渐变范围外不重复按照渐变范围内效果着色 colors: [ [0xf56c6c, 0], [0xffffff, 0.125], [0x409EFF, 0.25] ] }) } } .columnsGap(10) .rowsGap(10) .columnsTemplate(1fr 1fr) .rowsTemplate(1fr 1fr 1fr) .width(100%) .height(100%) }} 4、one more thing
一般情况下除非我们是设计师否则很难找到一些比较好的渐变色搭配如果你想找一些合适的渐变色可以来这里找找 http://www.gradientsguru.com/ 注意这不是在打广告
如果你也有其他的好的设计资源网站欢迎留言~
