按钮颜色渐变和阴影效果原创

X叶域Q

发布于 2024-12-18 11:16

3175浏览

0收藏

基于openharmony v5.0.0 Release 应用开发导读

按钮颜色渐变和阴影效果-鸿蒙开发者社区

一、色彩

通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。

接口	说明
linearGradient	为当前组件添加线性渐变的颜色渐变效果。
sweepGradient	为当前组件添加角度渐变的颜色渐变效果。
radialGradient	为当前组件添加径向渐变的颜色渐变效果。

1. 线性颜色渐变

它是通过沿着一条直线方向，让颜色从起始颜色平稳地过渡到结束颜色，从而为组件营造出线性的颜色渐变效果，这种渐变方式在很多需要营造整齐、有序的色彩过渡场景中较为常用，比如水平或垂直方向的色彩渐变背景等。

名称	类型	说明
angle	number \| string	线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值：180。角度为字符串时仅支持类型deg，grad，rad，trun。
direction	GradientDirection	线性渐变的方向，设置angle后不生效。默认值：GradientDirection.Bottom
colors	Array<[ResourceColor, number]>	指定某百分比位置处的渐变色颜色,设置非法颜色直接跳过。
repeating	boolean	为渐变的颜色重复着色。默认值：false

linearGradient线性竖直颜色渐变(默认)

按钮颜色渐变和阴影效果-鸿蒙开发者社区

Button("vertical", { type: ButtonType.Normal })
    .width(100)
    .height(100)
    .borderRadius(10)
    .linearGradient({
    	colors: [[0xf56c6c, 0.0], [0xffffff, 1.0]]
	})
Button("verticalCircle")
    .width(100)
    .height(100)
    .borderRadius(10)
    .linearGradient({
    	colors: [[0xf56c6c, 0.0], [0xffffff, 1.0]]
	})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

线性水平颜色渐变

按钮颜色渐变和阴影效果-鸿蒙开发者社区

Button("horizontal", { type: ButtonType.Normal })
    .height(80)
    .width(300)
    .fontColor("#000000")
    .linearGradient({
    direction: GradientDirection.Right,
    	colors: [["#6755CC", 0.0],["#D2355C", 0.5], ["#E8903E", 1.0]]
	})

Button("horizontalLeft")
    .height(80)s
    .width(224)
    .fontColor("#000000")
    .linearGradient({
    direction: GradientDirection.Left,
    	colors: [["#6755CC", 0.0],["#D2355C", 0.5], ["#E8903E", 1.0]]
	})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

2. 角度渐变

此方式是以一个中心点为基准，按照一定的角度范围，使颜色围绕该点进行圆周式的渐变过渡，能够创造出如同扇形展开般的色彩变化效果，常用于一些需要营造出旋转、环绕色彩氛围的组件装饰上。

sweepGradient角度渐变，仅绘制0-360度范围内的角度，超出时不绘制渐变色，只绘制纯色。

名称	类型	说明
center	[Length, Length]	为角度渐变的中心点，即相对于当前组件左上角的坐标。
start	number \| string	角度渐变的起点。默认值：0。角度为字符串时仅支持类型deg，grad，rad，trun。
end	number \| string	角度渐变的终点。默认值：0。角度为字符串时仅支持类型deg，grad，rad，trun。
rotation	number \| string	角度渐变的旋转角度。默认值：0。角度为字符串时仅支持类型deg，grad，rad，trun。
colors	Array<[ResourceColor, number]>	指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。
repeating	boolean	为渐变的颜色重复着色。默认值：false

sweepGradient

按钮颜色渐变和阴影效果-鸿蒙开发者社区

Button("vertical", { type: ButtonType.Normal })
    .width(100)
    .height(100)
    .borderRadius(10)
    .sweepGradient({
        center: [50, 50],   // 角度渐变中心点，当前为组件的左上角坐标
        rotation: 45, 		// 旋转角度
        start: 0,
        end: 359,
        colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
	})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

3. 径向渐变效果

是从一个中心点开始，颜色向四周呈放射状进行平稳过渡，就好像光芒从中心向外发散一样，适合用于模拟发光、扩散等视觉效果的场景，可让组件呈现出富有立体感和层次感的色彩渐变效果。

名称	类型	描述
center	[Length, Length]	径向渐变的中心点，即相对于当前组件左上角的坐标
radius	number \| string	径向渐变的半径。取值范围：[0,+∞)。说明：设置为小于的0值时，按值为0处理。
colors	Array<[ResourceColor, number]>	指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。
repeating	boolean	为渐变的颜色重复着色。默认值：false

radialGradient

按钮颜色渐变和阴影效果-鸿蒙开发者社区

Button("radialGradient")
    .width(100)
    .height(100)
    .borderRadius(10)
    .radialGradient({
        center: [50, 50],	// 角度渐变中心点
        radius: 100,		// 径向渐变半径
        repeating: true,	// 允许在组件内渐变范围外重复按照渐变范围内效果着色
        colors: [[0xf56c6c, 0], [0xffffff, 0.125], [0x409EFF, 0.25]]
	})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

二、阴影

阴影接口shadow可以为当前组件添加阴影效果，该接口支持两种类型参数，开发者可配置ShadowOptions自定义阴影效果。ShadowOptions模式下，当radius = 0 或者 color 的透明度为0时，无阴影效果。

参数：ShadowOptions 或者 ShadowStyle

ShadowStyle枚举

按钮颜色渐变和阴影效果-鸿蒙开发者社区

Button("noShadow")
  .height(60)
  .width(198)
  .fontColor("#000000")
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [["#02edff", 0.0],["#1281ff", 1.0]]
  })
Button("ShadowStyleShadow")
  .height(60)
  .width(198)
  .fontColor("#000000")
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [["#02edff", 0.0],["#1281ff", 1.0]]
  })
  .shadow(ShadowStyle.OUTER_DEFAULT_LG)	// 大阴影。
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

ShadowOptions对象

按钮颜色渐变和阴影效果-鸿蒙开发者社区

Button("horizontalLeft")
  .height(80)
  .width(224)
  .fontColor("#000000")
  .linearGradient({
    direction: GradientDirection.Left,
    colors: [["#6755CC", 0.0],["#D2355C", 0.5], ["#E8903E", 1.0]]
  })
Button("shadow")
  .height(80)
  .width(224)
  .fontColor("#000000")
  .linearGradient({
    direction: GradientDirection.Left,
    colors: [["#6755CC", 0.0],["#D2355C", 0.5], ["#E8903E", 1.0]]
  })
  .shadow({
    radius: 10, 
    color: 
    Color.Black
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

按钮颜色渐变和阴影效果-鸿蒙开发者社区

Button("horizontalRight", { type: ButtonType.Normal })
  .height(80)
  .width(300)
  .fontColor("#000000")
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [["#6755CC", 0.0],["#D2355C", 0.5], ["#E8903E", 1.0]]
  })

Button("horizontalRight", { type: ButtonType.Normal })
  .height(80)
  .width(300)
  .fontColor("#000000")
  .linearGradient({
    direction: GradientDirection.Right,
    colors: [["#6755CC", 0.0],["#D2355C", 0.5], ["#E8903E", 1.0]]
  })
  .shadow({ 
    radius: 10, // 阴影模糊半径。
    color: Color.Gray, 	// 阴影的颜色。
    offsetX: 20, // 阴影的X轴偏移量。
    offsetY: 20 // 	阴影的Y轴偏移量。
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

radius属性代表着阴影的模糊半径，决定了阴影边缘模糊的程度，数值越大，阴影看起来就越模糊柔和；
color属性确定了阴影呈现的颜色；
offsetX属性值为 20，意味着阴影在 X 轴方向上会有 20 个单位的偏移，控制着阴影水平方向的位置变化；
offsetY属性值同样是 20，表明阴影在 Y 轴方向也会产生 20 个单位的偏移，二者共同作用确定了阴影相对元素主体在平面上的具体位置，通过这些参数的设置，就能打造出符合需求的阴影视觉效果。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2024-12-18 11:20:09修改