Implement dynamic gradient background using property animation and color transition.

#harmonyos #dynamicgradient #arkts #lineargradient

Read the original article：Implement dynamic gradient background using property animation and color transition.

Problem Description

How to implement a dynamic gradient color background using property animations and color gradients on HarmonyOS?

Background Knowledge

Dynamic backgrounds are primarily achieved by combining gradient colors and animations. The 'linearGradient' is used to design the background color, and 'animateTo' is used to achieve the animation effect of background changes.

Use the 'animateTo' property animation to achieve the color change effect.

Use the 'linearGradient' color gradient to design the overall gradient effect of the background color.

Implementation Steps

Define a gradient color array using 'linearGradient'.
Define the 'animateTo' property animation method and set a reasonable animation duration.
Use a timer to switch between different gradient color arrays to achieve the animation effect.
Use the 'Stack' component to set the dynamic effect as the background.

Code Snippet

@Entry
@Component
struct Index {
  @State bgPositionX: number = 0
  @State gradientAngle: number = 135
  @State currentColorIndex: number = 0
  // Gradient color set (including multiple color schemes)
  colorSchemes: Array<Array<[ResourceColor, number]>> = [
    [
      ['#e0f7ff', 0.0],
      ['#d9e5ff', 0.2],
      ['#e6e0ff', 0.4],
      ['#ffebfa', 0.8],
      ['#e0f7ff', 1.0]
    ],
    [
      ['#fff3e6', 0.0],
      ['#ffe6f0', 0.4],
      ['#e6ecff', 0.8],
      ['#f0fff4', 1.0]
    ],
  ]

  aboutToAppear() {
    this.startComplexAnimation()
  }

  startComplexAnimation() {
    // Background sliding animation
    const animateSlide = () => {
      this.getUIContext().animateTo({
        duration: 15000,
        curve: Curve.EaseInOut
      }, () => {
        this.bgPositionX = 100
      })

      this.getUIContext().animateTo({
        duration: 15000,
        delay: 15000,
        curve: Curve.EaseInOut
      }, () => {
        this.bgPositionX = 0
      })
    }

    // Gradient Angle Animation
    const animateRotation = () => {
      this.getUIContext().animateTo({
        duration: 20000,
        curve: Curve.Linear
      }, () => {
        this.gradientAngle = 495
      })

      this.getUIContext().animateTo({
        duration: 3000, // Animation duration
        delay: 1000,
        curve: Curve.Linear,
      }, () => {
        this.gradientAngle = 135
      })
    }

    // Color Scheme Switching
    setInterval(() => {
      this.currentColorIndex = (this.currentColorIndex + 1) % this.colorSchemes.length
    }, 3000)

    // Launch Compound Animation
    animateSlide()
    animateRotation()
  }

  build() {
    Stack() {
      Column()
        .width('100%')
        .height('100%')
        .linearGradient({
          angle: this.gradientAngle,
          direction: GradientDirection.LeftTop,
          colors: this.colorSchemes[this.currentColorIndex],
          repeating: true
        })
        .backgroundImageSize(400) // Set background image size
        .backgroundImagePosition({ x: `${this.bgPositionX}%`, y: '50%' }) // Set background image position
        .transition({ type: TransitionType.All })
        .animation({ duration: 1000 })

      Column() {
        Text('Dynamic Gradient Background')
          .fontSize(24)
          .fontColor(Color.Black)
      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
    .onClick(() => {
      // Click to switch color scheme
      this.currentColorIndex = (this.currentColorIndex + 1) % this.colorSchemes.length
    })
  }
}

Limitations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example requires DevEco Studio 5.1.1 Release and above for compilation and execution.

DEV Community