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

于 2024-08-10 13:30:00 发布
阅读量801 收藏 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学习文档

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值