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

概述

动画效果可以丰富界面的细节，提升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.  }

使用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.  }