【鸿蒙实战开发】ArkUI-模糊动画效果实现

最新推荐文章于 2024-12-20 15:37:49 发布
最新推荐文章于 2024-12-20 15:37:49 发布
阅读量803 收藏 8
点赞数 9
分类专栏： 安卓 鸿蒙 前端 文章标签： harmonyos 华为 ui 鸿蒙 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141070295
版权

概述

动画效果可以丰富界面的细节，提升UI界面的真实感和品质感。例如，模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。ArkUI提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。本章中主要对常用的模糊、阴影和色彩效果等效果接口进行了介绍。

模糊可以用来体现界面空间的纵深感，区分前后元素的层级关系。

接口说明
backdropBlur为当前组件添加背景模糊效果，入参为模糊半径。
blur为当前组件添加内容模糊效果，入参为模糊半径。
backgroundBlurStyle为当前组件添加背景模糊效果，入参为模糊样式。
foregroundBlurStyle为当前组件添加内容模糊效果，入参为模糊样式。
motionBlur为当前组件添加由缩放大小或位移变化引起的运动过程中的动态模糊效果，入参为模糊半径和锚点坐标。

说明

以上接口是实时模糊接口，会每帧进行实时渲染，性能负载较高。当模糊内容和模糊半径都不需要变化时，建议使用静态模糊接口。

使用backdropBlur为组件添加背景模糊

1.  @Entry
2.  @Component
3.  struct BlurEffectsExample {
4.  build() {
5.  Column({ space: 10 }) {
6.  Text('backdropblur')
7.  .width('90%')
8.  .height('90%')
9.  .fontSize(20)
10.  .fontColor(Color.White)
11.  .textAlign(TextAlign.Center)
12.  .backdropBlur(10) // 对背景进行模糊
13.  .backgroundImage($r('app.media.share'))
14.  .backgroundImageSize({ width: 400, height: 300 })
15.  }
16.  .width('100%')
17.  .height('50%')
18.  .margin({ top: 20 })
19.  }
20.  }

image.png

使用blur为组件添加内容模糊

1.  @Entry
2.  @Component
3.  struct Index1 {
4.  @State radius: number = 0;
5.  @State text: string = '';
6.  @State y: string = '手指不在屏幕上';

8.  aboutToAppear() {
9.  this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ： " + this.y +
10.  "\n" + "当前图片模糊程度为 : " + this.radius;
11.  }

13.  build() {
14.  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
15.  Text(this.text)
16.  .height(200)
17.  .fontSize(20)
18.  .fontWeight(FontWeight.Bold)
19.  .fontFamily("cursive")
20.  .fontStyle(FontStyle.Italic)
21.  Image($r("app.media.wall"))
22.  .blur(this.radius) // 使用blur接口为照片组件添加内容模糊效果
23.  .height('100%')
24.  .width("100%")
25.  .objectFit(ImageFit.Cover)
26.  }.height('100%')
27.  .width("100%")
28.  .onTouch((event?: TouchEvent) => {
29.  if(event){
30.  if (event.type === TouchType.Move) {
31.  this.y = Number(event.touches[0].y.toString()).toString();
32.  this.radius = Number(this.y) / 10; // 根据跟手过程中的滑动距离修改模糊半径，配合模糊接口，形成跟手模糊效果
33.  }
34.  if (event.type === TouchType.Up) {
35.  this.radius = 0;
36.  this.y = '手指离开屏幕';
37.  }
38.  }
39.  this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ： " + this.y +
40.  "\n" + "当前图片模糊程度为 : " + this.radius;
41.  })
42.  }
43.  }

0000000000011111111.20240807205235.20946073163923055766145701529778.gif

使用backgroundBlurStyle为组件添加背景模糊效果

1.  @Entry
2.  @Component
3.  struct BackDropBlurStyleDemo {
4.  build() {
5.  Grid() {
6.  GridItem() {
7.  Column() {
8.  Column() {
9.  Text('原图')
10.  .fontSize(20)
11.  .fontColor(Color.White)
12.  .textAlign(TextAlign.Center)
13.  .width('100%')
14.  .height('100%')
15.  }
16.  .height(100)
17.  .aspectRatio(1)
18.  .borderRadius(10)
19.  .backgroundImage($r('app.media.share'))

21.  Text('原图')
22.  .fontSize(12)
23.  .fontColor(Color.Black)
24.  }
25.  .height('100%')
26.  .justifyContent(FlexAlign.Start)
27.  }
28.  .width(200)
29.  .height(200)

31.  GridItem() {
32.  Column() {
33.  Column() {
34.  Text('Thin')
35.  .fontSize(20)
36.  .fontColor(Color.White)
37.  .textAlign(TextAlign.Center)
38.  .width('100%')
39.  .height('100%')
40.  }
41.  .height(100)
42.  .aspectRatio(1)
43.  .borderRadius(10)
44.  .backgroundImage($r('app.media.share'))
45.  // BlurStyle.Thin: 为组件添加轻薄材质模糊效果
46.  // ThemeColorMode.LIGHT: 固定使用浅色模式效果
47.  // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色
48.  // scale: 背景材质模糊效果程度，默认值是1
49.  .backgroundBlurStyle(BlurStyle.Thin, {
50.  colorMode: ThemeColorMode.LIGHT,
51.  adaptiveColor: AdaptiveColor.DEFAULT,
52.  scale: 0.1
53.  })

55.  Text('Thin')
56.  .fontSize(12)
57.  .fontColor(Color.Black)
58.  }
59.  .height('100%')
60.  .justifyContent(FlexAlign.Start)
61.  }
62.  .width(200)
63.  .height(200)

65.  GridItem() {
66.  Column() {
67.  Column() {
68.  Text('Regular')
69.  .fontSize(20)
70.  .fontColor(Color.White)
71.  .textAlign(TextAlign.Center)
72.  .width('100%')
73.  .height('100%')
74.  }
75.  .height(100)
76.  .aspectRatio(1)
77.  .borderRadius(10)
78.  .backgroundImage($r('app.media.share'))
79.  .backgroundBlurStyle(BlurStyle.Regular, {
80.  colorMode: ThemeColorMode.LIGHT,
81.  adaptiveColor: AdaptiveColor.DEFAULT,
82.  scale: 0.1
83.  })

85.  Text('Regular')
86.  .fontSize(12)
87.  .fontColor(Color.Black)
88.  }
89.  .height('100%')
90.  .justifyContent(FlexAlign.Start)
91.  }
92.  .width(200)
93.  .height(200)

95.  GridItem() {
96.  Column() {
97.  Column() {
98.  Text('Thick')
99.  .fontSize(20)
100.  .fontColor(Color.White)
101.  .textAlign(TextAlign.Center)
102.  .width('100%')
103.  .height('100%')
104.  }
105.  .height(100)
106.  .aspectRatio(1)
107.  .borderRadius(10)
108.  .backgroundImage($r('app.media.share'))
109.  .backgroundBlurStyle(BlurStyle.Thick, {
110.  colorMode: ThemeColorMode.LIGHT,
111.  adaptiveColor: AdaptiveColor.DEFAULT,
112.  scale: 0.1
113.  })

115.  Text('Thick')
116.  .fontSize(12)
117.  .fontColor(Color.Black)
118.  }
119.  .height('100%')
120.  .justifyContent(FlexAlign.Start)
121.  }
122.  .width(200)
123.  .height(200)

125.  GridItem() {
126.  Column() {
127.  Column() {
128.  Text('BACKGROUND_THIN')
129.  .fontSize(12)
130.  .fontColor(Color.White)
131.  .textAlign(TextAlign.Center)
132.  .width('100%')
133.  .height('100%')
134.  }
135.  .height(100)
136.  .aspectRatio(1)
137.  .borderRadius(10)
138.  .backgroundImage($r('app.media.share'))
139.  .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, {
140.  colorMode: ThemeColorMode.LIGHT,
141.  adaptiveColor: AdaptiveColor.DEFAULT,
142.  scale: 0.1
143.  })

145.  Text('BACKGROUND_THIN')
146.  .fontSize(12)
147.  .fontColor(Color.Black)
148.  }
149.  .height('100%')
150.  .justifyContent(FlexAlign.Start)
151.  }
152.  .width(200)
153.  .height(200)

155.  GridItem() {
156.  Column() {
157.  Column() {
158.  Text('BACKGROUND_REGULAR')
159.  .fontSize(12)
160.  .fontColor(Color.White)
161.  .textAlign(TextAlign.Center)
162.  .width('100%')
163.  .height('100%')
164.  }
165.  .height(100)
166.  .aspectRatio(1)
167.  .borderRadius(10)
168.  .backgroundImage($r('app.media.share'))
169.  .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, {
170.  colorMode: ThemeColorMode.LIGHT,
171.  adaptiveColor: AdaptiveColor.DEFAULT,
172.  scale: 0.1
173.  })

175.  Text('BACKGROUND_REGULAR')
176.  .fontSize(12)
177.  .fontColor(Color.Black)
178.  }
179.  .height('100%')
180.  .justifyContent(FlexAlign.Start)
181.  }
182.  .width(200)
183.  .height(200)

185.  GridItem() {
186.  Column() {
187.  Column() {
188.  Text('BACKGROUND_THICK')
189.  .fontSize(12)
190.  .fontColor(Color.White)
191.  .textAlign(TextAlign.Center)
192.  .width('100%')
193.  .height('100%')
194.  }
195.  .height(100)
196.  .aspectRatio(1)
197.  .borderRadius(10)
198.  .backgroundImage($r('app.media.share'))
199.  .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, {
200.  colorMode: ThemeColorMode.LIGHT,
201.  adaptiveColor: AdaptiveColor.DEFAULT,
202.  scale: 0.1
203.  })

205.  Text('BACKGROUND_THICK')
206.  .fontSize(12)
207.  .fontColor(Color.Black)
208.  }
209.  .height('100%')
210.  .justifyContent(FlexAlign.Start)
211.  }
212.  .width(200)
213.  .height(200)

215.  GridItem() {
216.  Column() {
217.  Column() {
218.  Text('BACKGROUND_ULTRA_THICK')
219.  .fontSize(12)
220.  .fontColor(Color.White)
221.  .textAlign(TextAlign.Center)
222.  .width('100%')
223.  .height('100%')
224.  }
225.  .height(100)
226.  .aspectRatio(1)
227.  .borderRadius(10)
228.  .backgroundImage($r('app.media.share'))
229.  .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
230.  colorMode: ThemeColorMode.LIGHT,
231.  adaptiveColor: AdaptiveColor.DEFAULT,
232.  scale: 0.1
233.  })

235.  Text('BACKGROUND_ULTRA_THICK')
236.  .fontSize(12)
237.  .fontColor(Color.Black)
238.  }
239.  .height('100%')
240.  .justifyContent(FlexAlign.Start)
241.  }
242.  .width(200)
243.  .height(200)
244.  }
245.  .columnsTemplate('1fr 1fr')
246.  .rowsTemplate('1fr 1fr 1fr 1fr')
247.  .width('100%')
248.  .height('100%')
249.  .margin({ top: 40 })
250.  }
251.  }

image.png

使用foregroundBlurStyle为组件添加内容模糊效果

1.  @Entry
2.  @Component
3.  struct ForegroundBlurStyleDemo {
4.  build() {
5.  Grid() {
6.  GridItem() {
7.  Column() {
8.  Column() {
9.  Text('原图')
10.  .fontSize(20)
11.  .fontColor(Color.White)
12.  .textAlign(TextAlign.Center)
13.  .width('100%')
14.  .height('100%')
15.  }
16.  .height(100)
17.  .aspectRatio(1)
18.  .borderRadius(10)
19.  .backgroundImage($r('app.media.share'))

21.  Text('原图')
22.  .fontSize(12)
23.  .fontColor(Color.Black)
24.  }
25.  .height('100%')
26.  .justifyContent(FlexAlign.Start)
27.  }
28.  .width(200)
29.  .height(200)

31.  GridItem() {
32.  Column() {
33.  Column() {
34.  Text('Thin')
35.  .fontSize(20)
36.  .fontColor(Color.White)
37.  .textAlign(TextAlign.Center)
38.  .width('100%')
39.  .height('100%')
40.  }
41.  .height(100)
42.  .aspectRatio(1)
43.  .borderRadius(10)
44.  .backgroundImage($r('app.media.share'))
45.  // BlurStyle.Thin: 为组件添加轻薄材质模糊效果
46.  // ThemeColorMode.LIGHT: 固定使用浅色模式效果
47.  // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色
48.  // scale: 背景材质模糊效果程度，默认值是1
49.  .foregroundBlurStyle(BlurStyle.Thin, {
50.  colorMode: ThemeColorMode.LIGHT,
51.  adaptiveColor: AdaptiveColor.DEFAULT,
52.  scale: 0.1
53.  })

55.  Text('Thin')
56.  .fontSize(12)
57.  .fontColor(Color.Black)
58.  }
59.  .height('100%')
60.  .justifyContent(FlexAlign.Start)
61.  }
62.  .width(200)
63.  .height(200)

65.  GridItem() {
66.  Column() {
67.  Column() {
68.  Text('Regular')
69.  .fontSize(20)
70.  .fontColor(Color.White)
71.  .textAlign(TextAlign.Center)
72.  .width('100%')
73.  .height('100%')
74.  }
75.  .height(100)
76.  .aspectRatio(1)
77.  .borderRadius(10)
78.  .backgroundImage($r('app.media.share'))
79.  .foregroundBlurStyle(BlurStyle.Regular, {
80.  colorMode: ThemeColorMode.LIGHT,
81.  adaptiveColor: AdaptiveColor.DEFAULT,
82.  scale: 0.1
83.  })

85.  Text('Regular')
86.  .fontSize(12)
87.  .fontColor(Color.Black)
88.  }
89.  .height('100%')
90.  .justifyContent(FlexAlign.Start)
91.  }
92.  .width(200)
93.  .height(200)

95.  GridItem() {
96.  Column() {
97.  Column() {
98.  Text('Thick')
99.  .fontSize(20)
100.  .fontColor(Color.White)
101.  .textAlign(TextAlign.Center)
102.  .width('100%')
103.  .height('100%')
104.  }
105.  .height(100)
106.  .aspectRatio(1)
107.  .borderRadius(10)
108.  .backgroundImage($r('app.media.share'))
109.  .foregroundBlurStyle(BlurStyle.Thick, {
110.  colorMode: ThemeColorMode.LIGHT,
111.  adaptiveColor: AdaptiveColor.DEFAULT,
112.  scale: 0.1
113.  })

115.  Text('Thick')
116.  .fontSize(12)
117.  .fontColor(Color.Black)
118.  }
119.  .height('100%')
120.  .justifyContent(FlexAlign.Start)
121.  }
122.  .width(200)
123.  .height(200)

125.  GridItem() {
126.  Column() {
127.  Column() {
128.  Text('BACKGROUND_THIN')
129.  .fontSize(12)
130.  .fontColor(Color.White)
131.  .textAlign(TextAlign.Center)
132.  .width('100%')
133.  .height('100%')
134.  }
135.  .height(100)
136.  .aspectRatio(1)
137.  .borderRadius(10)
138.  .backgroundImage($r('app.media.share'))
139.  .foregroundBlurStyle(BlurStyle.BACKGROUND_THIN, {
140.  colorMode: ThemeColorMode.LIGHT,
141.  adaptiveColor: AdaptiveColor.DEFAULT,
142.  scale: 0.1
143.  })

145.  Text('BACKGROUND_THIN')
146.  .fontSize(12)
147.  .fontColor(Color.Black)
148.  }
149.  .height('100%')
150.  .justifyContent(FlexAlign.Start)
151.  }
152.  .width(200)
153.  .height(200)

155.  GridItem() {
156.  Column() {
157.  Column() {
158.  Text('BACKGROUND_REGULAR')
159.  .fontSize(12)
160.  .fontColor(Color.White)
161.  .textAlign(TextAlign.Center)
162.  .width('100%')
163.  .height('100%')
164.  }
165.  .height(100)
166.  .aspectRatio(1)
167.  .borderRadius(10)
168.  .backgroundImage($r('app.media.share'))
169.  .foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, {
170.  colorMode: ThemeColorMode.LIGHT,
171.  adaptiveColor: AdaptiveColor.DEFAULT,
172.  scale: 0.1
173.  })

175.  Text('BACKGROUND_REGULAR')
176.  .fontSize(12)
177.  .fontColor(Color.Black)
178.  }
179.  .height('100%')
180.  .justifyContent(FlexAlign.Start)
181.  }
182.  .width(200)
183.  .height(200)

185.  GridItem() {
186.  Column() {
187.  Column() {
188.  Text('BACKGROUND_THICK')
189.  .fontSize(12)
190.  .fontColor(Color.White)
191.  .textAlign(TextAlign.Center)
192.  .width('100%')
193.  .height('100%')
194.  }
195.  .height(100)
196.  .aspectRatio(1)
197.  .borderRadius(10)
198.  .backgroundImage($r('app.media.share'))
199.  .foregroundBlurStyle(BlurStyle.BACKGROUND_THICK, {
200.  colorMode: ThemeColorMode.LIGHT,
201.  adaptiveColor: AdaptiveColor.DEFAULT,
202.  scale: 0.1
203.  })

205.  Text('BACKGROUND_THICK')
206.  .fontSize(12)
207.  .fontColor(Color.Black)
208.  }
209.  .height('100%')
210.  .justifyContent(FlexAlign.Start)
211.  }
212.  .width(200)
213.  .height(200)

215.  GridItem() {
216.  Column() {
217.  Column() {
218.  Text('BACKGROUND_ULTRA_THICK')
219.  .fontSize(12)
220.  .fontColor(Color.White)
221.  .textAlign(TextAlign.Center)
222.  .width('100%')
223.  .height('100%')
224.  }
225.  .height(100)
226.  .aspectRatio(1)
227.  .borderRadius(10)
228.  .backgroundImage($r('app.media.share'))
229.  .foregroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
230.  colorMode: ThemeColorMode.LIGHT,
231.  adaptiveColor: AdaptiveColor.DEFAULT,
232.  scale: 0.1
233.  })

235.  Text('BACKGROUND_ULTRA_THICK')
236.  .fontSize(12)
237.  .fontColor(Color.Black)
238.  }
239.  .height('100%')
240.  .justifyContent(FlexAlign.Start)
241.  }
242.  .width(200)
243.  .height(200)
244.  }
245.  .columnsTemplate('1fr 1fr')
246.  .rowsTemplate('1fr 1fr 1fr 1fr')
247.  .width('100%')
248.  .height('100%')
249.  .margin({ top: 40 })
250.  }
251.  }

image.png

使用motionBlur为组件添加运动模糊效果

1.  import { curves } from '@kit.ArkUI';

3.  @Entry
4.  @Component
5.  struct motionBlurTest {
6.  @State widthSize: number = 400
7.  @State heightSize: number = 320
8.  @State flag: boolean = true
9.  @State radius: number = 0
10.  @State x: number = 0
11.  @State y: number = 0

13.  build() {
14.  Column() {
15.  Column() {
16.  Image($r('app.media.testImg'))
17.  .width(this.widthSize)
18.  .height(this.heightSize)
19.  .onClick(() => {
20.  this.radius = 5;
21.  this.x = 0.5;
22.  this.y = 0.5;
23.  if (this.flag) {
24.  this.widthSize = 100;
25.  this.heightSize = 80;
26.  } else {
27.  this.widthSize = 400;
28.  this.heightSize = 320;
29.  }
30.  this.flag = !this.flag;
31.  })
32.  .animation({
33.  duration: 2000,
34.  curve: curves.springCurve(10, 1, 228, 30),
35.  onFinish: () => {
36.  this.radius = 0;
37.  }
38.  })
39.  .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } })
40.  }
41.  }.width('100%').margin({ top: 5 })
42.  }
43.  }

0000000000011111111.20240807205235.87440688083467640341022903068485.gif

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙HarmonyOS实战：ArkUI组件添加内容背景模糊效果
2401_84917132的博客
08-06 732
ArkUI提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。本章中主要对常用的模糊、阴影和色彩效果等效果接口进行了介绍。
鸿蒙开发进阶（HarmonyOS）背景模糊效果的自定义TabBar实现案例
adaedwa187545的博客
11-04 546
在一些主页的场景中，为了实现更好的视觉体验，会给TabBar加上透明的背景模糊效果。本示例主要讲解如何使用系统提供的背景设置的能力，实现背景模糊的效果。
基于ArkUI框架开发——图片模糊处理的实现
OpenHarmony_dev的博客
05-05 1414
我们根据像素点的r、g、b值，得到M点的像素点值，就这样，一个一个像素点的操作，中间点相当于失去视觉上的焦点，整个图片就产生模糊的效果。但这样一边倒的方式，在模糊的效果上，达不到需求的，所以，我们就需要根据这个模糊的本质概念，去想想，加一些东西或者更改取平均值的规则，完成我们想要的效果。这样我们在计算图片的焦点像素值时，将该点当作中心点，当作1的权重，其他周围的点，按照该正态分布的位置，去分配它的权重，这样我们就可以根据该正态分布函数及其各个点的像素ARGB值，算出经过正态分布之后的像素ARGB值。
鸿蒙Harmony小案例：图片展示背景高斯模糊效果
kaiyu0426的博客
08-20 1361
本文案例使用的是沉浸式效果的其他两种办法，第一种见下文。HarmonyOS开发应用沉浸式效果（全屏显示）-CSDN博客在ability中通过getMainWindow可以获取主窗体，然后通过得到的window对象设置全屏即可实现。）实现界面元素覆盖到状态栏和导航条，获取到状态栏和导航条高度后进行避让处理。可以通过调用窗口强制全屏布局接口（在ability中通过getMainWindow可以获取主窗体，然后通过得到的window对象设置全屏即可实现。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（背景设置）
最新发布
Androidbye的博客
12-20 885
设置组件的背景样式。
【Harmony实战开发】鸿蒙动画效果实现案例
maniujiaoyu的博客
07-25 1071
●可动画属性：对于可动画属性，系统不仅提供通用属性，还支持自定义可动画属性。○系统可动画属性：组件自带的支持改变UI界面的属性接口，如位置、缩放、模糊等。○自定义可动画属性：ArkUI提供@AnimatableExtend装饰器用于自定义可动画属性。开发者可从自定义绘制的内容中抽象出可动画属性，用于控制每帧绘制的内容，如自定义绘制音量图标。通过自定义可动画属性，可以为ArkUI中部分原本不支持动画的属性添加动画。●不可动画属性：zIndex、focusable等。
OpenHarmony实战开发-如何实现动画效果中的模糊效果
2401_82546228的博客
04-28 547
动画效果可以丰富界面的细节，提升UI界面的真实感和品质感。例如，模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。ArkUI提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。本章中主要对常用的模糊、阴影和色彩效果等效果接口进行了介绍。
【鸿蒙ArkUI实战开发】基于ArkUI的透明页面效果
CTrup的博客
09-14 861
但是每个窗口都有自己的UIContext，可以通过UIContext获取其他窗口的router路由栈，并进行参数传递操作，但是因为该方案会造成不必要是内存消耗，影响性能，并且实现起来较复杂这里只提供思路，不做具体实现，相关功能在navigation路由中实现。加载页面后，这时候出现的新页面发现并不是透明的，那么我们把页面跟容器设置背景颜色为透明，也没有效果，根因是窗口默认是不透明的，需要设置窗口背景色。router路由无法更改页面模式，所以无法直接实现透明页面，需要借助拉起子窗口的方案实现透明页面的效果。
HarmonyOS NEXT实战开发：动画效果（模糊）
hanyanyou的博客
07-27 1122
动画效果可以丰富界面的细节，提升UI界面的真实感和品质感。
OpenHarmony实战开发-动画效果、如何实现色彩渐变效果
2401_82546228的博客
04-28 496
通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。
鸿蒙HarmonyOS NEXT开发：浮层（ArkTS通用属性）
shudaoshanBBQ的博客
08-08 1367
设置组件的遮罩文本。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：背景设置）
m0_64420071的博客
03-01 9423
ArkTS声明式开发（通用属性：背景设置）
用HarmonyOS ArkUI实现点赞美女翻牌动效
老卫的技术站
12-10 902
体验HarmonyOS 3最新的API 9，欢迎大家一起参与构建这个万物互联的时代！
基于ImageKit对图片进行处理
hongxiaomeng的博客
06-04 467
华为官方解析开源鸿蒙 OpenHarmony 3.1关键特性画布，教你如何完成飞机大战小游戏
Harmony_wang的博客
02-11 3697
华为技术有限公司的江英杰为大家揭晓了关于开源鸿蒙 OpenHarmony 3.1 Beta 版中的一个关键特性，也就是 ArkUI 开发框架中的 canvas 画布。 据介绍，canvas 是 ArkUI 开发框架里的画布组件，常用于自定义绘制图形。因为其轻量、灵活、高效等优点，被广泛应用于 UI 界面开发中。本期，我们将为大家介绍 ArkUI 开发框架中 canvas 组件的使用。 canvas 介绍 1.1 什么是 canvas？ 了解到，在 Web 浏览器中，canvas 是一个可自定义 wi
【HarmonyOS实战开发】基于ArkUI的透明页面效果
好运来的博客
08-30 983
透明页面也可以叫做弹窗页面，实际开发场景中经常有一个页面覆盖在另一个页面上的效果，例如：评论弹窗页面、广告弹窗页面等。
【鸿蒙实战开发】ArkUI-动效开发指导
HarmonyOS007的博客
08-15 882
在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏
ArkUI组件--TextInput组件（文本输入）
qq_53312564的博客
12-04 1151
①placeholder：输入框无输入时的提示文本（默认显示文本，浅色，直接输入即可）②text：输入框当前的文本内容（也是默认显示文本，深色，如有需要可以修改）
OpenHarmony应用开发—ArkUI组件集合
OpenHarmony_dev的博客
09-22 931
使用全局组件ShowToast,TitleBar,IntroductionTitle实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能。使用全局组件TitleBar，AttributeModificationTool实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能。若不存在三级导航，则跳转至详情页面。使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能。
鸿蒙HarmonyOS实战-ArkUI按钮覆盖在图片上方
11-22
鸿蒙HarmonyOS实战中，如果你想要在ArkUI框架下创建一个按钮覆盖在图片上方，首先你需要了解以下几个步骤： 1. 创建界面布局：在`.h`文件中声明视图组件，比如ImageView和Button。例如： ```cpp class MyActivity : public Activity { public: ViewRef mImageView; ButtonRef mBtnOverlay; }; ``` 2. 在`.cpp`文件中初始化这些组件： ```cpp void MyActivity::CreateWidgets() { mImageView = new ImageView(this); mImageView->SetSize(Resolution::GetScreenWidth(), Resolution::GetScreenHeight()); // 设置图片资源 mImageView->SetImage(ResourceId::IMAGE_BACKGROUND); mBtnOverlay = new Button(this); mBtnOverlay->SetText("点击我"); mBtnOverlay->SetPosition(50, mImageView->GetSize().height - mBtnOverlay->GetSize().height); // 将按钮放在图片底部 } ``` 3. 更新界面布局：在`OnCreate`方法中添加布局管理器并加入这两个组件： ```cpp void MyActivity::OnCreate(const sptr<Bundle>& bundle) override { auto layout = std::make_shared<StackLayout>(this); layout->Add(mImageView); layout->Add(mBtnOverlay); SetRootView(layout); ... } ``` 4. 添加事件监听：为了让用户交互，给按钮添加Click事件处理： ```cpp mBtnOverlay->AddEventListener(eEventType::Clicked, [this](Event* event) { // 当按钮被点击时，可以执行相应的操作 }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值