1# 运动模糊 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9设置组件由缩放大小或位移变化引起的运动过程中的动态模糊效果。需要与动画的AnimateParam的onFinish参数配合使用。 10 11> **说明：** 12> 13> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## motionBlur 16 17motionBlur(value: MotionBlurOptions): T 18 19在当前组件由缩放大小或位移变化引起的运动过程中，增加动态模糊效果。 20 211、不建议在组件内转场、共享元素转场、组件内隐式元素转场和粒子动画场景中使用该属性，否则会产生非预期效果。 22 232、该属性需要在开始状态将motionBlur的参数radius设置为0，否则冷启动时会有非预期效果。 24 253、该属性需要与动画的AnimateParam的onFinish参数配合使用,需要在运动模糊动画结束后将motionBlur的参数radius置为0，否则会产生非预期效果。 26 274、在使用该属性过程中，不要在使用过程中频繁更改同一个组件的模糊半径，否则会产生非预期效果。比如示例中的动画，频繁点击会出现模糊效果偶尔失效的情况。 28 295、运动模糊锚点坐标需要与动画缩放的锚点保持一致，否则会产生非预期效果。 30 316、模糊半径建议设置1以内，否则会产生非预期效果。 32 33**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 34 35**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37**参数：** 38 39| 参数名 | 类型 | 必填 | 说明 | 40| ------ | ----------------------------------------------- | ---- | ------------------ | 41| value | [MotionBlurOptions](#motionbluroptions对象说明) | 是 | 定义运动模糊参数。 | 42 43**返回值：** 44 45| 类型 | 说明 | 46| ------ | ------------------------ | 47| T | 返回当前组件。 | 48 49## motionBlur<sup>18+</sup> 50 51motionBlur(motionBlur: Optional\<MotionBlurOptions>): T 52 53在当前组件由缩放大小或位移变化引起的运动过程中，增加动态模糊效果。与[motionBlur](#motionblur)相比，motionBlur参数新增了对undefined类型的支持。 54 551、不建议在组件内转场、共享元素转场、组件内隐式元素转场、粒子动画场景下使用该属性，否则会产生非预期效果。 56 572、该属性需要在开始状态将motionBlur的参数radius设置为0，否则冷启动时会有非预期效果。 58 593、该属性需要与动画的AnimateParam的onFinish参数配合使用，需要在运动模糊动画结束后将motionBlur的参数radius置为0，否则会产生非预期效果。 60 614、在使用该属性过程中，不要在使用过程中频繁更改同一个组件的模糊半径，否则会产生非预期效果。比如示例中的动画，频繁点击会出现模糊效果偶尔失效的情况。 62 635、运动模糊锚点坐标需要与动画缩放的锚点保持一致，否则会产生非预期效果。 64 656、模糊半径建议设置1以内，否则会产生非预期效果。 66 67**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ---------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 75| motionBlur | Optional\<[MotionBlurOptions](#motionbluroptions对象说明)> | 是 | 定义运动模糊参数。<br/>当motionBlur的值为undefined时，维持之前取值。 | 76 77**返回值：** 78 79| 类型 | 说明 | 80| ------ | ------------------------ | 81| T | 返回当前组件。 | 82 83## MotionBlurOptions对象说明 84 85运动模糊选项。 86 87**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 88 89**系统能力：** SystemCapability.ArkUI.ArkUI.Full 90 91| 名称 | 类型 | 只读 | 可选 | 说明 | 92| ------------- | ----------------------------------------------------------- | ----- | ----- | ------------------------------------------------------------ | 93| radius | number | 否 | 否 | 模糊半径，取值范围[0.0, ∞)，建议设置1.0以内。 | 94| anchor | [MotionBlurAnchor](#motionbluranchor对象说明) | 否 | 否 | 运动模糊锚点坐标。运动模糊锚点坐标设置时需要与动画缩放的锚点保持一致设置。 | 95 96## MotionBlurAnchor对象说明 97 98运动模糊锚坐标。 99 100**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104| 名称 | 类型 | 只读 | 可选 | 说明 | 105| ------------- | ----------------------------------------------------------- | ----- | ----- | ------------------------------------------------------------ | 106| x | number | 否 | 否 | 锚点坐标x值，取值范围[0.0, 1.0]。 | 107| y | number | 否 | 否 | 锚点坐标y值，取值范围[0.0, 1.0]。 | 108 109## 示例 110 111属性动画状态下添加运动模糊效果。 112```ts 113// xxx.ets 114import { curves } from '@kit.ArkUI'; 115 116@Entry 117@Component 118struct MotionBlurTest { 119 @State widthSize: number = 400; 120 @State heightSize: number = 320; 121 @State flag: boolean = true; 122 @State radius: number = 0; 123 @State x: number = 0; 124 @State y: number = 0; 125 126 build() { 127 Column() { 128 Column() { 129 // $r("app.media.testImg")需要替换为开发者所需的图像资源文件。 130 Image($r('app.media.testImg')) 131 .width(this.widthSize) 132 .height(this.heightSize) 133 .onClick(() => { 134 this.radius = 5; 135 this.x = 0.5; 136 this.y = 0.5; 137 if (this.flag) { 138 this.widthSize = 100; 139 this.heightSize = 80; 140 } else { 141 this.widthSize = 400; 142 this.heightSize = 320; 143 } 144 this.flag = !this.flag; 145 }) 146 .animation({ 147 duration: 2000, 148 curve: curves.springCurve(10, 1, 228, 30), 149 onFinish: () => { 150 this.radius = 0; 151 } 152 }) 153 .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } }) 154 } 155 }.width('100%').margin({ top: 5 }) 156 } 157} 158``` 159 160 161
