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