1# 运动模糊
2
3设置组件由缩放大小或位移变化引起的运动过程中的动态模糊效果。需要与动画的AnimateParam的onFinish参数配合使用。
4
5>  **说明：**
6>
7>  从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## motionBlur
11
12motionBlur(value: MotionBlurOptions)
13
14在当前组件由缩放大小或位移变化引起的运动过程中，增加动态模糊效果。
15
161、不建议在组件内转场、共享元素转场、组件内隐式元素转场、粒子动画场景下使用该属性，否则会有非预期效果。
17
182、该属性需要在开始状态将motionBlur的参数radius设置为0，否则冷启动时会有非预期效果。
19
203、该属性需要与动画的AnimateParam的onFinish参数配合使用,需要在运动模糊动画结束后将motionBlur的参数radius置为0，否则会有非预期效果。
21
224、在使用该属性过程中，不要在使用过程中频繁更改同一个组件的模糊半径，否则会有非预期效果。比如示例中的动画，频繁点击会出现模糊效果偶尔失效的情况。
23
245、运动模糊锚点坐标需要与动画缩放的锚点保持一致，否则会有非预期效果。
25
266、模糊半径建议设置1以内，否则会有非预期效果。
27
28**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
29
30**参数：**
31
32| 参数名  | 类型                                                         | 必填 | 说明                                                         |
33| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
34| value   | [MotionBlurOptions](#motionbluroptions对象说明) | 是   | 定义运动模糊参数。 |
35
36## MotionBlurOptions对象说明
37
38**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
39
40| 名称          | 类型                                                        | 必填  | 说明                                                         |
41| ------------- | ----------------------------------------------------------- | ----- | ------------------------------------------------------------ |
42| radius | number      | 是    | 模糊半径，取值范围[0.0, ∞)，建议设置1.0以内。 |
43| anchor | [MotionBlurAnchor](#motionbluranchor对象说明) | 是    | 运动模糊锚点坐标。运动模糊锚点坐标设置时需要与动画缩放的锚点保持一致设置。 |
44
45## MotionBlurAnchor对象说明
46
47**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
48
49| 名称          | 类型                                                        | 必填  | 说明                                                         |
50| ------------- | ----------------------------------------------------------- | ----- | ------------------------------------------------------------ |
51| x | number      | 是    | 锚点坐标x值,取值范围[0.0, 1.0]。 |
52| y | number      | 是    | 锚点坐标y值,取值范围[0.0, 1.0]。 |
53
54## 示例
55
56属性动画状态下添加运动模糊效果。
57```ts
58// xxx.ets
59import { curves } from '@kit.ArkUI';
60
61@Entry
62@Component
63struct motionBlurTest {
64  @State widthSize: number = 400
65  @State heightSize: number = 320
66  @State flag: boolean = true
67  @State radius: number = 0
68  @State x: number = 0
69  @State y: number = 0
70
71  build() {
72    Column() {
73      Column() {
74        Image($r('app.media.testImg'))
75          .width(this.widthSize)
76          .height(this.heightSize)
77          .onClick(() => {
78            this.radius = 5;
79            this.x = 0.5;
80            this.y = 0.5;
81            if (this.flag) {
82              this.widthSize = 100;
83              this.heightSize = 80;
84            } else {
85              this.widthSize = 400;
86              this.heightSize = 320;
87            }
88            this.flag = !this.flag;
89          })
90          .animation({
91            duration: 2000,
92            curve: curves.springCurve(10, 1, 228, 30),
93            onFinish: () => {
94              this.radius = 0;
95            }
96          })
97          .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } })
98      }
99    }.width('100%').margin({ top: 5 })
100  }
101}
102```
103
104![motionBlurTest](figures/motionBlur.gif)
105