TTMusic/entry/src/main/ets/view/RotatingCover.ets

/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { displaySync } from '@kit.ArkGraphics2D';
import { PreferencesUtil, StrUtil } from '@pura/harmony-utils';
import { CommonConstants } from '../common/constants/CommonConstants';

@Component
export struct RotatingCover {
  @StorageLink('isPlaying') @Watch('animationFun') isPlaying: boolean = false;
  @Prop songLabel: string;
  @State timer: number = 0
  @State rotateAngle: number = 0
  @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;



  //封面旋转动画
  animationFun() {
    if (this.isPlaying) {
      this.timer = setInterval(()=>{
        this.rotateAngle += 1
      }, 100)
    } else {
      clearInterval(this.timer)
    }
  }

  aboutToAppear() {

    let themeColor = PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
    AppStorage.setOrCreate('themeColor', themeColor);
    this.themeColor=themeColor
  }

  aboutToDisappear(): void {

  }

  build() {
    Column() {
      Image(this.songLabel)
        .height(42)
        .width(42)
        .alt( $r('app.media.music_red'))
        .fillColor(this.themeColor)
        .borderRadius('100%')
        .shadow({
          radius: 10,
          type: ShadowType.BLUR,
          color: 'on_primary'
        })
        .clip(true)
        .margin({ right: 12 })
        .rotate({
          angle: this.rotateAngle,
          centerX: "50%",
          centerY: "50%",
        })
        .animation({
          duration: 100,
          curve: Curve.Linear
        })

    }
  }
}