How to add blur effects in your wearable project

#harmonyos #arkui #animationeffects #blureffects

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)
  }
}