How to add blur effects in your wearable project

Read the original article：How to add blur effects in your wearable project

Context

Animation effects can add detail to your animations and create a sense of realism. For example, blur and shadow effects can lend a 3D look to objects and deliver a more engaging animation experience. ArkUI provides a diverse array of efficient APIs for you to develop exquisite and personalized effects. This topic covers the common blur, shadow, and color effects.

Blur effects add a sense of depth and allow for distinction of hierarchical relationship between elements.

Description

API	Description
backdropBlur	Applies a background blur effect to the component. The input parameter is the blur radius.
blur	Applies a foreground blur effect to the component. The input parameter is the blur radius.
backgroundBlurStyle	Applies a background blur effect to the component. The input parameter is the blur style.
foregroundBlurStyle	Applies a foreground blur effect to the component. The input parameter is the blur style.
motionBlur	Applies a motion blur effect to the component being scaled or moved. The input parameters are the blur radius and anchor point coordinates.

Solution / Approach

Applying Motion Blur with motionBlur

import { curves } from '@kit.ArkUI';

@Entry
@Component
struct motionBlurTest {
  @State widthSize: number = 280
  @State heightSize: number = 200
  @State flag: boolean = true
  @State radius: number = 0
  @State x: number = 0
  @State y: number = 0

  build() {
    Column() {
      Column() {
        Image($r('app.media.startIcon'))
          .width(this.widthSize)
          .height(this.heightSize)
          .onClick(() => {
            this.radius = 5;
            this.x = 0.5;
            this.y = 0.5;
            if (this.flag) {
              this.widthSize = 100;
              this.heightSize = 75;
            } else {
              this.widthSize = 280;
              this.heightSize = 200;
            }
            this.flag = !this.flag;
          })
          .animation({
            duration: 2000,
            curve: curves.springCurve(10, 1, 228, 30),
            onFinish: () => {
              this.radius = 0;
            }
          })
          .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } })
      }
    }.width('100%').height('100%').margin({ top: 5 }).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
  }
}