基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】

HarmonyOS 5.0（Next）作为华为自主研发的操作系统，以其强大的性能和丰富的开发功能吸引了众多开发者。本文将详细介绍如何在HarmonyOS 5.0（Next）中实现渐变模糊效果，并通过代码实战展示具体操作步骤。
在这里插入图片描述

ArkTS：HarmonyOS 5.0 的新编程语言

ArkTS（Ark TypeScript）是华为为其操作系统HarmonyOS 5.0推出的一种全新编程语言，它基于TypeScript并针对HarmonyOS的多设备协同与高性能需求进行了优化。与传统的编程语言相比，ArkTS具备了对分布式架构、跨设备通信和高效资源管理的原生支持。

为什么选择ArkTS？

跨设备支持：HarmonyOS致力于实现多设备协同工作，从手机到智能家居，再到可穿戴设备，ArkTS专为这种分布式场景设计，提供了简化的编程模型，使开发者能够更轻松地构建跨设备应用。
高效的性能：与JavaScript/TypeScript相比，ArkTS对内存管理、计算效率等方面进行了优化，能够更好地支持大规模数据处理和复杂的应用场景，满足现代智能设备的高性能要求。
丰富的API支持：ArkTS充分利用HarmonyOS提供的丰富系统API，特别是在设备间无缝连接、消息传递和同步数据处理等方面，极大简化了开发者的工作。
简洁的语法：作为TypeScript的扩展，ArkTS保留了TypeScript的简洁语法，并结合了针对HarmonyOS的特殊功能，降低了开发门槛，使得开发者能够快速上手。

通过ArkTS，HarmonyOS 5.0不仅提升了开发效率，还能够实现跨设备、跨平台的智能互联体验，推动智能终端的全面发展。

准备工作

在开始之前，请确保你已经安装了最新的HarmonyOS开发环境，并创建了一个基础的HarmonyOS项目。
渐变模糊效果实现步骤

创建基础页面

首先，我们需要创建一个基础页面，该页面将作为渐变模糊效果的背景。

@Entry
@Component
struct MainPage {
   
    build() {
   
        Column() {
   
            Image($r('app.media.background'))
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Cover)
        }
    }
}

添加模糊效果

HarmonyOS提供了foregroundBlurStyle属性来实现模糊效果。我们可以利用这个属性为页面添加模糊效果。

@Entry
@Component
struct BlurPage {
   
    build() {
   
        Stack() {
   
            // 原始内容
            Image($r('app.media.background'))
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Cover)

            // 模糊层
            .foregroundBlurStyle(BlurStyle.Medium, {
   
                colorMode: ThemeColorMode.LIGHT,
                adaptiveColor: AdaptiveColor.DEFAULT,
                scale: 1.0
            })
        }
    }
}

实现渐变效果

为了实现渐变模糊效果，我们可以利用linearGradient属性。在模糊层上添加一个覆盖层，并使用linearGradient属性设置颜色渐变。

@Entry
@Component
struct GradientBlurPage {
   
    @State gradientColors: Array<[Color, number]> = [
        [Color.White, 0],
        [Color.Black.withAlpha(0.5), 0.5],
        [Color.Black.withAlpha(0), 1]
    ];

    build() {
   
        Stack() {
   
            // 原始内容
            Image($r('app.media.background'))
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Cover)

            // 模糊层
            .foregroundBlurStyle(BlurStyle.Medium, {
   
                colorMode: ThemeColorMode.LIGHT,
                adaptiveColor: AdaptiveColor.DEFAULT,
                scale: 1.0
            })

            // 渐变覆盖层
            .overlay(
                Column()
                    .width('100%')
                    .height('100%')
                    .linearGradient({
   
                        colors: this.gradientColors,
                        direction: GradientDirection.Vertical
                    })
            )
        }
    }
}

@Entry 
@Component 
struct ImageExample1 {
    
  private_resource1: Resource = $r('app.media.icon'); 
  @State image_src: Resource = this.private_resource1; 

  build() {
    
    Column() {
    
      Flex({
    direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
    
        Row({
    space: 5 }) {
    
          Image(this.image_src) 
            .linearGradientBlur(60, {
    
              fractionStops: [[0, 0], [0, 0.33], [1, 0.66], [1, 1]], 
              direction: GradientDirection.Bottom 
            }) 
        } 
      } 
    } 
  } 
}

// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
   
  build() {
   
    Column({
    space: 5 }) {
   
      // 添加阴影效果，图片效果不变
      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .shadow({
    radius: 10, color: Color.Green, offsetX: 20, offsetY: 20 })

      // 添加内部阴影效果
      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .shadow({
    radius: 5, color: Color.Green, offsetX: 20, offsetY: 20,fill:true }).opacity(0.5)

      // 灰度效果0~1，越接近1，灰度越明显
      Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).grayscale(0.3)
      Image($r('app.media.image')).width('90%').height(30).grayscale(0.8)

      // 高光效果，1为正常图片，<1变暗，>1亮度增大
      Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).brightness(1.2)

      // 饱和度，原图为1
      Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).saturate(2.0)
      Image($r('app.media.image')).width('90%').height(30).saturate(0.7)

      // 对比度，1为原图，>1值越大越清晰，<1值越小越模糊
      Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).contrast(2.0)
      Image($r('app.media.image')).width('90%').height(30).contrast(0.8)

      // 图像反转比例
      Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).invert(0.2)
      Image($r('app.media.image')).width('90%').height(30).invert(0.8)

      // 叠色添加
      Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Green)
      Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Blue)

      // 深褐色
      Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).sepia(0.8)

      // 色相旋转
      Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).hueRotate(90)
    }.width('100%').margin({
    top: 5 })
  }
}

在这里插入图片描述

动态调整渐变效果

为了让渐变效果更加动态，我们可以添加一些交互逻辑，例如通过滑动条来调整渐变效果。

@Entry
@Component
struct DynamicGradientBlurPage {
   
    @State gradientPosition: number = 0.5;

    build() {
   
        Column({
    space: 20 }) {
   
            // 滑动条
            Slider()
                .value(this.gradientPosition)
                .range({
    min: 0, max: 1 })
                .onChange((value) => {
   
                    this.gradientPosition = value;
                })

            // 渐变模糊页面
            GradientBlurComponent({
    gradientPosition: this.gradientPosition })
        }
    }
}

@Component
struct GradientBlurComponent {
   
    @Prop gradientPosition: number;

    @State gradientColors: Array<[Color, number]> = [
        [Color.White, 0],
        [Color.Black.withAlpha(0.5 * this.gradientPosition), this.gradientPosition],
        [Color.Black.withAlpha(0), 1]
    ];

    build() {
   
        Stack() {
   
            // 原始内容
            Image($r('app.media.background'))
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Cover)

            // 模糊层
            .foregroundBlurStyle(BlurStyle.Medium, {
   
                colorMode: ThemeColorMode.LIGHT,
                adaptiveColor: AdaptiveColor.DEFAULT,
                scale: 1.0
            })

            // 渐变覆盖层
            .overlay(
                Column()
                    .width('100%')
                    .height('100%')
                    .linearGradient({
   
                        colors: this.gradientColors,
                        direction: GradientDirection.Vertical
                    })
            )
        }
    }
}

在这里插入图片描述

添加事件交互

为了让用户的体验更加丰富，可以添加一些交互事件。例如，通过用户手势操作触发渐变模糊效果的变化。以下示例展示了如何通过拖动手势动态调整模糊和渐变透明度。

使用手势调整模糊效果

@Entry
@Component
struct GestureControlledBlurPage {
   
    @State blurRadius: number = 10;
    @State gradientOpacity: number = 0.5;

    build() {
   
        Stack() {
   
            // 背景图片
            Image($r('app.media.background'))
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Cover)

            // 模糊层
            .foregroundBlurStyle(BlurStyle.Custom, {
   
                blurRadius: this.blurRadius,
                scale: 1.0
            })

            // 渐变覆盖层
            .overlay(
                Column()
                    .width('100%')
                    .height('100%')
                    .linearGradient({
   
                        colors: [
                            [Color.White.withAlpha(this.gradientOpacity), 0],
                            [Color.Black.withAlpha(this.gradientOpacity), 1]
                        ],
                        direction: GradientDirection.Vertical
                    })
            )

            // 拖动手势
            .gesture(
                DragGesture()
                    .onUpdate((event) => {
   
                        this.blurRadius = Math.min(30, Math.max(5, event.deltaX / 10));
                        this.gradientOpacity = Math.min(1, Math.max(0, event.deltaY / 200));
                    })
            )
        }
    }
}

通过手势调整背景位置

除了调整模糊程度，还可以通过手势移动背景图片的位置，创造动态视差效果。

@Entry
@Component
struct ParallaxBlurPage {
   
    @State offsetX: number = 0;
    @State offsetY: number = 0;

    build() {
   
        Stack() {
   
            // 背景图片
            Image($r('app.media.background'))
                .width('110%')
                .height('110%')
                .objectFit(ImageFit.Cover)
                .offset({
    x: this.offsetX, y: this.offsetY })

            // 模糊层
            .foregroundBlurStyle(BlurStyle.Medium, {
   
                scale: 1.0
            })

            // 拖动手势
            .gesture(
                DragGesture()
                    .onUpdate((event) => {
   
                        this.offsetX += event.deltaX;
                        this.offsetY += event.deltaY;
                    })
            )
        }
    }
}

为控件添加渐变模糊效果

不仅仅是图片，HarmonyOS中其他控件也可以实现渐变模糊效果，比如为弹窗、按钮等UI元素添加模糊背景。

示例：模糊背景的弹窗

@Entry
@Component
struct BlurPopupPage {
   
    @State showPopup: boolean = false;

    build() {
   
        Stack() {
   
            // 主页面内容
            Column() {
   
                Button('Show Popup')
                    .onClick(() => {
   
                        this.showPopup = true;
                    })
            }

            // 弹窗模糊背景
            if (this.showPopup) {
   
                Stack()
                    .width('100%')
                    .height('100%')
                    .backgroundColor(Color.Black.withAlpha(0.5))
                    .foregroundBlurStyle(BlurStyle.Light, {
   
                        scale: 1.0
                    })
                    .onClick(() => {
   
                        this.showPopup = false;
                    })

                // 弹窗内容
                Column()
                    .width('80%')
                    .height('50%')
                    .backgroundColor(Color.White)
                    .borderRadius(10)
                    .center()
                    .padding(20)
                    .text('This is a popup!')
            }
        }
    }
}

这个示例展示了在点击按钮后，模糊背景与弹窗内容的结合效果，为应用界面带来高质量的视觉体验。

总结

通过上述步骤，我们成功在HarmonyOS 5.0（Next）上实现了渐变模糊效果。从创建基础页面到添加模糊效果，再到实现渐变效果以及动态调整，每一个步骤都经过了详细的介绍和代码展示。希望这篇文章能够帮助到你，让你在HarmonyOS开发中更加得心应手。

渐变模糊效果的实现是一个复杂但有趣的过程，它要求开发者在算法设计和性能优化方面都有深厚的功底。通过本文的介绍，我们了解了如何在HarmonyOS 5.0（Next）系统上实现渐变模糊效果，并探讨了性能优化的方法。希望这些技术和代码示例能为开发者们提供有益的参考和启发。

心得

在这篇关于基于HarmonyOS 5.0 (Next)实现渐变模糊效果的技术文中，作者详细介绍了如何在华为自主研发的操作系统上，通过简单而实用的代码实现独特的视觉效果。通过结合模糊、渐变以及动态调整等元素，开发者能够轻松为应用程序添加富有创意和互动性的界面设计。

首先，文章从基础页面搭建入手，通过Stack和Image控件展示了如何将图片设置为背景，并进一步通过foregroundBlurStyle属性实现模糊效果。这些基本操作为后续更复杂的效果打下了良好的基础。

然后，作者通过逐步引导我们如何将渐变效果融入模糊层，采用了linearGradient属性，配合不同的颜色渐变，实现了一个既简洁又精致的渐变模糊效果。对于开发者来说，这种方法非常直观，不仅减少了开发成本，还大大提高了用户界面的美观性和用户体验。

文章还介绍了如何通过交互元素来动态调整渐变模糊效果，包括利用滑动条、拖动手势等方式，这些互动性强的设计进一步提升了用户与界面之间的互动性，使得用户体验更加个性化和流畅。这种通过动态变化来增强视觉效果的方式，为应用程序注入了更多的生命力，也为开发者提供了更灵活的定制空间。

此外，文章还通过具体代码示例展示了如何为控件（如图片、弹窗、按钮等）添加渐变模糊效果，使得整个界面更加协调和一致。可以看出，HarmonyOS的强大功能不仅体现在基础功能上，还在于它提供的灵活性和扩展性，让开发者可以通过各种创意实现更加多样化的界面设计。

总结而言，这篇文章展示了HarmonyOS 5.0 (Next)的强大功能以及如何利用这些功能来实现炫酷的视觉效果。它不仅对开发者了解渐变模糊效果的实现过程具有重要意义，还为开发者提供了实际的操作指导和思路。无论是基础的模糊效果，还是动态渐变调整，甚至是手势控制，文章都为开发者提供了丰富的技术实现方案，具有较高的实用价值和技术参考意义。

基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】

基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】

ArkTS：HarmonyOS 5.0 的新编程语言

为什么选择ArkTS？

准备工作

创建基础页面

添加模糊效果

实现渐变效果

动态调整渐变效果

添加事件交互

使用手势调整模糊效果

通过手势调整背景位置

为控件添加渐变模糊效果

示例：模糊背景的弹窗

总结

心得

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】

基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】

ArkTS：HarmonyOS 5.0 的新编程语言

为什么选择ArkTS？

准备工作

创建基础页面

添加模糊效果

实现渐变效果

动态调整渐变效果

添加事件交互

使用手势调整模糊效果

通过手势调整背景位置

为控件添加渐变模糊效果

示例：模糊背景的弹窗

总结

心得

热门文章

最新文章

相关电子书