1# Motion Blur 2 3You can apply a motion blur effect to a component being scaled or moved. This effect must be used together with the **onFinish** parameter of **AnimateParam**. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8 9## motionBlur 10 11motionBlur(value: MotionBlurOptions): T 12 13Applies a motion blur effect to the component being scaled or moved. 14 151. Do not use this API in intra-component transitions, shared element transitions, implicit element transitions, or particle animations. Doing so may cause unexpected results. 16 172. The **radius** parameter of **motionBlur** must be set to **0** for the initial state. Otherwise, there may be unexpected results during a cold start. 18 193. This API must be used together with the **onFinish** parameter of **AnimateParam**. Its **radius** parameter must be set to **0** when the animation ends; otherwise, there may be unexpected results. 20 214. When using this API, do not frequently change the blur radius of the same component; otherwise, there may be unexpected results. For example, if you frequently click the image in the example, the blur effect may not work sometimes. 22 235. To avoid unexpected results, make sure the coordinates of the motion blur anchor point are the same as those of the animation scaling anchor point. 24 256. To avoid unexpected results, set the blur radius to a value less than 1. 26 27**Atomic service API**: This API can be used in atomic services since API version 12. 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31**Parameters** 32 33| Name| Type | Mandatory| Description | 34| ------ | ----------------------------------------------- | ---- | ------------------ | 35| value | [MotionBlurOptions](#motionbluroptions) | Yes | Motion blur options.| 36 37**Return value** 38 39| Type | Description | 40| ------ | ------------------------ | 41| T | Current component.| 42 43## motionBlur<sup>18+</sup> 44 45motionBlur(motionBlur: Optional\<MotionBlurOptions>): T 46 47Applies a motion blur effect to the component being scaled or moved. Compared with [motionBlur](#motionblur), this API supports the **undefined** type for the **motionBlur** parameter. 48 491. Do not use this API in intra-component transitions, shared element transitions, implicit element transitions, or particle animations. Doing so may cause unexpected results. 50 512. The **radius** parameter of **motionBlur** must be set to **0** for the initial state. Otherwise, there may be unexpected results during a cold start. 52 533. This API must be used together with the **onFinish** parameter of **AnimateParam**. Its **radius** parameter must be set to **0** when the animation ends; otherwise, there may be unexpected results. 54 554. When using this API, do not frequently change the blur radius of the same component; otherwise, there may be unexpected results. For example, if you frequently click the image in the example, the blur effect may not work sometimes. 56 575. To avoid unexpected results, make sure the coordinates of the motion blur anchor point are the same as those of the animation scaling anchor point. 58 596. To avoid unexpected results, set the blur radius to a value less than 1. 60 61**Atomic service API**: This API can be used in atomic services since API version 18. 62 63**System capability**: SystemCapability.ArkUI.ArkUI.Full 64 65**Parameters** 66 67| Name | Type | Mandatory | Description | 68| ---------- | ---------------------------------------------------------- | ---- | ------------------------------------------------------------ | 69| motionBlur | Optional\<[MotionBlurOptions](#motionbluroptions)> | Yes | Motion blur options.<br>If **motionBlur** is set to **undefined**, the previous value is retained.| 70 71**Return value** 72 73| Type | Description | 74| ------ | ------------------------ | 75| T | Current component.| 76 77## MotionBlurOptions 78 79**Atomic service API**: This API can be used in atomic services since API version 12. 80 81**System capability**: SystemCapability.ArkUI.ArkUI.Full 82 83| Name | Type | Mandatory | Description | 84| ------------- | ----------------------------------------------------------- | ----- | ------------------------------------------------------------ | 85| radius | number | Yes | Blur radius. The value range is [0.0, ∞). You are advised to set it to a value less than 1.0.| 86| anchor | [MotionBlurAnchor](#motionbluranchor) | Yes | Coordinates of the motion blur anchor point. They must be the same as those of the animation scaling anchor point.| 87 88## MotionBlurAnchor 89 90**Atomic service API**: This API can be used in atomic services since API version 12. 91 92**System capability**: SystemCapability.ArkUI.ArkUI.Full 93 94| Name | Type | Mandatory | Description | 95| ------------- | ----------------------------------------------------------- | ----- | ------------------------------------------------------------ | 96| x | number | Yes | X-coordinate of the anchor point. The value range is [0.0, 1.0].| 97| y | number | Yes | Y-coordinate of the anchor point. The value range is [0.0, 1.0].| 98 99## Example 100 101This example demonstrates how to apply a motion blur effect. 102```ts 103// xxx.ets 104import { curves } from '@kit.ArkUI'; 105 106@Entry 107@Component 108struct motionBlurTest { 109 @State widthSize: number = 400; 110 @State heightSize: number = 320; 111 @State flag: boolean = true; 112 @State radius: number = 0; 113 @State x: number = 0; 114 @State y: number = 0; 115 116 build() { 117 Column() { 118 Column() { 119 Image($r('app.media.testImg')) 120 .width(this.widthSize) 121 .height(this.heightSize) 122 .onClick(() => { 123 this.radius = 5; 124 this.x = 0.5; 125 this.y = 0.5; 126 if (this.flag) { 127 this.widthSize = 100; 128 this.heightSize = 80; 129 } else { 130 this.widthSize = 400; 131 this.heightSize = 320; 132 } 133 this.flag = !this.flag; 134 }) 135 .animation({ 136 duration: 2000, 137 curve: curves.springCurve(10, 1, 228, 30), 138 onFinish: () => { 139 this.radius = 0; 140 } 141 }) 142 .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } }) 143 } 144 }.width('100%').margin({ top: 5 }) 145 } 146} 147``` 148 149 150
