HarmonyOS鸿蒙Next简易版网易云音乐动画

HarmonyOS鸿蒙Next简易版网易云音乐动画

@Entry @Component struct WangYiMusic { @State picAngle: number = 0; @State picIterations: number = -1; @State caneAngle: number = 30;

build() { Row() { Column() { Stack() { Image($r(‘app.media.wang_yi_music’)) .height(200) .width(200) .margin({ top: 40 }) .borderRadius(100) .rotate({ angle: this.picAngle }) .animation({ duration: 2000, curve: Curve.Linear, iterations: this.picIterations, playMode: PlayMode.Normal })

      Image($r('app.media.cane'))
        .width('30%')
        .margin({ top: -180, left: 40 })
        .rotate({
          angle: this.caneAngle
        })
        .animation({
          duration: 1000,
          curve: Curve.Linear,
          iterations: 1,
          playMode: PlayMode.Normal
        })
    }
    .width(300)
    .height(300)
    .backgroundColor('#CCF5FF')

    Row({ space: 10 }) {
      Image($r('app.media.play'))
        .margin({ top: 100 })
        .width(80)
        .onClick(() => {
          this.picAngle = 360;
          this.caneAngle=70;
        })

      Image($r('app.media.pause'))
        .margin({ top: 100 })
        .width(80)
        .onClick(() => {
          this.picAngle = 0;
          this.caneAngle=30;
        })
    }
    .justifyContent(FlexAlign.SpaceEvenly)
    .width('80%')
  }
  .width('100%')
  .height('90%')
  .justifyContent(FlexAlign.Start)
}
.height('100%')
.backgroundColor('#E6E6E6')

} }


更多关于HarmonyOS鸿蒙Next简易版网易云音乐动画的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HarmonyOS鸿蒙Next简易版网易云音乐动画的实现主要依赖于ArkUI框架和动画组件。ArkUI是鸿蒙操作系统中的UI开发框架，支持声明式UI和组件化开发。通过ArkUI，开发者可以使用JavaScript或TypeScript编写动画效果。

在鸿蒙Next中，动画的实现通常涉及以下几种方式：

  1. 属性动画：通过改变组件的属性值（如位置、大小、透明度等）来实现动画效果。可以使用animateTo方法或Animation类来定义和控制动画。

  2. 关键帧动画：通过定义关键帧及其对应的属性值，系统会自动在关键帧之间进行插值计算，生成平滑的动画效果。可以使用KeyframeAnimation类来实现。

  3. 路径动画：让组件沿着指定的路径移动。可以使用PathAnimation类来定义路径和动画参数。

  4. 组合动画：将多个动画组合在一起，实现复杂的动画效果。可以使用ParallelAnimation或SequentialAnimation类来组合动画。

在实现网易云音乐动画时，通常会涉及到播放按钮的旋转、进度条的动态变化、以及专辑封面的翻转等效果。这些效果可以通过上述动画方式来实现。

例如，播放按钮的旋转可以通过属性动画改变其旋转角度来实现：

import { animateTo } from 'arkui';

function rotateButton(button, degree) {
    animateTo({
        duration: 1000,
        curve: 'easeInOut',
        onUpdate: () => {
            button.rotate(degree);
        }
    });
}

进度条的动态变化可以通过改变其宽度或使用关键帧动画来实现。专辑封面的翻转可以通过3D变换和关键帧动画来实现。

总的来说，鸿蒙Next提供了丰富的动画API和组件，能够帮助开发者轻松实现各种复杂的动画效果。

更多关于HarmonyOS鸿蒙Next简易版网易云音乐动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next上实现简易版网易云音乐动画，可以通过Animator组件和Canvas绘制音乐波形。首先，使用Animator控制动画的播放和暂停，通过Canvas绘制动态波形。波形数据可以模拟或从音频文件中提取，使用Path和Paint绘制波形线条。通过ValueAnimator动态改变波形高度，实现动画效果。最后，将动画与播放控制逻辑结合，实现类似网易云音乐的动态波形效果。

回到顶部