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

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

一、色彩

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

1. 线性颜色渐变

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

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]]
	})

线性水平颜色渐变

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]]
	})

2. 角度渐变

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

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

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]]
	})

3. 径向渐变效果

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

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]]
	})

二、阴影

阴影接口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)	// 大阴影。

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
})

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轴偏移量。
})

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