HarmonyOS开发：ArkUI视觉效果之透明度、渐变、模糊、阴影、高亮一网打尽

视觉效果

透明度设置

opacity(value: number | Resource): T 设置组件的透明度

1表示不透明，0表示完全透明，达到隐藏组件效果，但是在布局中占位。
若设置的值小于0时，则取值为0，若设置的值大于1
子组件会继承父组件的透明度，并与自身的透明度属性叠加。如：父组件透明度为0.1，子组件设置透明度为0.8，则子组件实际透明度为0.1*0.8=0.08。

ts 复制代码

Text().width('90%').height(50).backgroundColor(0xAFEEEE).opacity(1)
Text().width('90%').height(50).backgroundColor(0xAFEEEE).opacity(0.7)
Text().width('90%').height(50).backgroundColor(0xAFEEEE).opacity(0.4)
Text().width('90%').height(50).backgroundColor(0xAFEEEE).opacity(0.1)
Text().width('90%').height(50).backgroundColor(0xAFEEEE).opacity(0)

如图所示，透明度从1变化到0

颜色渐变

线性渐变

linearGradient(value: LinearGradientOptions): T

参数：

angle:number 线性渐变的起始角度。0度时渐变方向为从下往上，0点方向顺时针旋转为正向角度。
direction: GradientDirection渐变的方向，设置了angle时不生效。
- GradientDirection.None 默认渐变GradientDirection.Bottom
colors: Array[ResourceColor, number] 渐变颜色，由是多个[颜色,位置]组成的数组。
- [Color.Green, 0.0] 绿色从组件0位置开始
- [Color.Red, 0.5] 到0.5位置为红色
- [Color.Yellow, 1.0] 到1位置为黄色

$!tip$
colors参数的约束：

ResourceColor表示填充的颜色，number表示指定颜色所处的位置，取值范围为[0,1.0]，0表示需要设置渐变色的容器的开始处，1.0表示容器的结尾处。想要实现多个颜色渐变效果时，多个数组中number参数建议递增设置，如后一个数组number参数比前一个数组number小的话，按照等于前一个数组number的值处理。

示例：使用angle,colors配置渐变方向和颜色。

ts 复制代码

Row()
    .width('90%')
    .height(50)
    .linearGradient({
      angle: 0, 
      colors: [[Color.Green, 0.0], [Color.Yellow, 0.5], [Color.Orange, 1.0]]
    })

示例：使用direction、colors配置渐变方向和颜色。

ts 复制代码

Row()
    .width('90%')
    .height(50)
    .linearGradient({
      direction:GradientDirection.Right,
      colors: [[Color.Green, 0.0], [Color.Yellow, 0.5], [Color.Orange, 1.0]]
    })

径向渐变

radialGradient(value: RadialGradientOptions): T

参数：

center径向渐变的中心点
radius径向渐变的半径
colors径向渐变的颜色
repeating(可选)为渐变的颜色重复着色。默认值：false。

示例：按照红、绿、黄从中心径向渐变

ts 复制代码

Row()
    .width(100)
    .height(100)
    .radialGradient({
      center: [50, 50],
      radius: 50,
      colors: [['#ff0000', 0.0], ['#0000ff', 0.3], ['#ffff00', 1.0]]
    })

示例：按照红、绿、黄从中心径向渐变，并且重复着色。

ts 复制代码

Row()
    .width(100)
    .height(100)
    .radialGradient({
      center: [50, 50],
      radius: 50,
      repeating:true,
      colors: [['#ff0000', 0.0], ['#0000ff', 0.3], ['#ffff00', 0.5]]
    })

角度渐变

sweepGradient(value: SweepGradientOptions): T

角度渐变。

参数：

center为角度渐变的中心点，即相对于当前组件左上角的坐标。
start角度渐变的起点。默认值：0从3点钟位置开始。取值有[0,360]度的限制，顺时针方向为正方向。
end角度渐变结束点。取值有[0,360]度的限制，顺时针方向为正方向。

ts 复制代码

 Row()
        .width(100)
        .height(100)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 359,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })

图像效果

阴影

ts 复制代码

Row()
    .width(100)
    .height(100)
    .borderWidth(1)
    .backgroundColor(Color.Yellow)
    .shadow({
      radius: 10,
      color: Color.Green,
      offsetX: 30,
      offsetY: 30,
      fill: false
    })

模糊

模糊分为背景模糊和前景模糊

设置背景模糊

backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions): T

参数：

value: BlurStyle 模糊材质样式
options: BackgroundBlurStyleOptions
- colorMode: 内容模糊效果使用的深浅色模式。
- adaptiveColor: 内容模糊效果使用的取色模。
- scale: 模糊程度从0到1模糊程度逐渐变大，0表示不模糊。

ts 复制代码

Column() {
    Text("Thin Material")
      .width(150)
      .height(50)
      .margin({
        top: 100
      })
      .backgroundBlurStyle(
        BlurStyle.Thick, {
        colorMode: ThemeColorMode.SYSTEM,
        adaptiveColor: AdaptiveColor.DEFAULT,
        scale: 0.5
      })
}
.height(200)
.width(300)
.backgroundImage($r('app.media.image'))
.backgroundImageSize(ImageSize.Cover)

设置前景模糊

ts 复制代码

Column() {
        Text("Thin Material")
          .width(150)
          .height(50)
          .fontColor(Color.White)
          .margin({
            top: 100
          })
          .foregroundBlurStyle(
            BlurStyle.Thin, {
            colorMode: ThemeColorMode.LIGHT,
            adaptiveColor: AdaptiveColor.DEFAULT,
            scale: 0.5
          })
      }
      .height(200)
      .width(300)
      .backgroundImage($r('app.media.image'))
      .backgroundImageSize(ImageSize.Cover)

高光

brightness(value: number): T. 为组件添加高光效果（增加曝光度）。

参数：

value: 取值在1到2之间，1表示不补光，2表示补光到最大（白色）

ts 复制代码

Image($r('app.media.image')).width(300).height(200)
          .brightness(1.5)

灰度

grayscale(value: number): T 为组件添加灰度效果。

参数

value 取值在0到1之间，越接近1越接近完全灰度（黑白）

scss 复制代码

 Image($r('app.media.image')).width(300).height(200)
          .grayscale(0)

饱和度

saturate(value: number): T. 为组件添加饱和度效果。

参数：

value ：为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例
- 入参为1时，显示原图像；
- 大于1时含色成分越大，饱和度越大。
- 小于1时消色成分越大，饱和度越小。
建议取值在[0,50]之间。

scss 复制代码

 Image($r('app.media.image')).width(300).height(200)
          .saturate(0.6)

对比度

contrast(value: number): T 为组件添加对比度效果。

参数：

value: 入参为对比度的值，默认值为1.
- 值为1时，显示原图。
- 大于1时，值越大对比度越高，图像越清晰醒目。
- 小于1时，值越小对比度越低，图像越接近灰色。
- 当对比度为0时，图像变为全灰。
推荐取值：[0,10]

scss 复制代码

Image($r('app.media.image')).width(300).height(200)
       	.contrast(1.5)

到此，关于常用的视觉效果属性就学完了，撒花🎉🎉🎉