Pulse Ring with ArkUI Animator

Read the original article：Pulse Ring with ArkUI Animator Requirement Description Implement a minimal Pulse Ring animation for HarmonyOS wearable: One-tap play/pause . Smooth ring animation (grow/shrink). Quick theme & ring color selection. Background Knowledge Prefer this.getUIContext().createAnimator() (UI context-bound). onFrame provides interpolated value ; write it to @State and use in UI. @State must have default values in ArkTS. Implementation Steps Define themes and a small palette for ring color. Create a component with @State fields: running , progress , themeIdx , ringColor . Build an Animator with direction: 'alternate' , iterations: -1 . In onFrame , update progress ( 0..1 ) and compute ring size. UI: a centered Stack() as the ring; a Row() of swatches; a small “Theme” button. Tap the ring to toggle play/pause. Code Snippet / Configuration import { AnimatorResult , AnimatorOptions } from ' @kit.ArkUI ' const MIN = 84 const MAX = 140 interface ThemeConf { bg : Color ; fg : C