import { AnimatorOptions, AnimatorResult } from "@kit.ArkUI"

export enum SpinImageType {
? RedLoading,
? WhiteLoading
}

@Component
export struct SpinImage {
? @Prop
? type?: SpinImageType
? @Prop
? url?: string
? @State
? animatedValue: number = 0
? private animator?: AnimatorResult
? private animatedAnimatorOptions: AnimatorOptions = {
? ? duration: 1000,
? ? easing: 'linear',
? ? delay: 0,
? ? fill: "both",
? ? direction: "reverse",
? ? iterations: -1,
? ? begin: 0,
? ? end: 360
? }

? aboutToAppear() {
? ? this.play()
? }

? aboutToDisappear() {
? ? this.animator?.cancel()
? ? this.animator = undefined
? }

? play() {
? ? if (this.animator) {
? ? ? this.animator!.play()
? ? ? return
? ? }

? ? this.animator = this.getUIContext()
? ? ? .createAnimator(this.animatedAnimatorOptions)
? ? this.animator.play()
? ? this.animator.onFrame = (progress: number) => {
? ? ? this.animatedValue = progress
? ? }
? }

? getImageSource(): ResourceStr {
? ? if(this.url){
? ? ? return this.url
? ? }
? ? switch (this.type) {
? ? ? case SpinImageType.RedLoading:
? ? ? ? return $r('app.media.loading_red_36')
? ? ? case SpinImageType.WhiteLoading:
? ? ? ? return $r('app.media.loading_white_64')
? ? ? default:
? ? ? ? return $r('app.media.loading_red_36')
? ? }
? }

? build() {
? ? Image(this.getImageSource()).aspectRatio(1).rotate({
? ? ? angle: -this.animatedValue
? ? })
? }
}

?