HarmonyOS 竖条跳动的示例

import { UIContext } from '@ohos.arkui.UIContext';

@Component
struct bar {
  @State h: number = 0
  delay: number = 0
  uiContext: UIContext | undefined = undefined;

  aboutToAppear(): void {
    setTimeout(() => {
      this.uiContext = this.getUIContext?.();
      if (!this.uiContext) {
        return
      }

      this.uiContext.keyframeAnimateTo({ iterations: -1, delay: this.delay }, [
        {
          duration: 500,
          event: () => {
            this.h = 10;
          }
        },
        {
          duration: 500,
          event: () => {
            this.h = 0;
          }
        }
      ]);
    }, 0)
  }

  build() {
    Column().width(5).height(this.h).backgroundColor(Color.Red)
  }
}

@Component
struct beatDemo {
  build() {
    Row({ space: 2 }) {
      bar({
        delay: 500
      })
      bar({
        delay: 200
      })
      bar({
        delay: 300
      })
    }.alignItems(VerticalAlign.Bottom).height(40)
  }
}