鸿蒙next应用开发：播放器转场Mini条一镜到底案例

于 2024-08-02 21:15:37 发布
阅读量729 收藏 15
点赞数 14
分类专栏： OpenHarmony 鸿蒙 HarmonyOS 文章标签： 前端 鸿蒙 开发语言 harmonyos 华为 鸿蒙系统 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DMZDAMS/article/details/140876105
版权
鸿蒙 同时被 3 个专栏收录
187 篇文章 2 订阅
订阅专栏
OpenHarmony
185 篇文章 0 订阅
订阅专栏
HarmonyOS
181 篇文章 1 订阅
订阅专栏

介绍

音乐播放的Mini条播放栏在转场时的一镜到底动画是音乐播放器应用开发中常见的需求。本示例将介绍如何实现Mini条的一镜到底动画，如Mini条歌曲封面的缩放动画，Mini条的展开收起动画等。

效果图预览

使用说明

  1. 打开首页，点击Mini条，可查看Mini条展开动画。
  2. 点击全屏播放页左上角收起按钮，实现收起动画。
  3. 点击Mini条展开全屏播放页，手指按住全屏播放页向下拖动，当全屏播放页拖动到屏幕的上半部分（即屏幕高度的前50%位置）时松手，可查看全屏播放页向上回弹动画。
  4. 点击Mini条展开全屏播放页，手指按住全屏播放页向下拖动，当全屏播放页拖动到屏幕的下半部分（即屏幕高度的后50%位置）时松手，可查看全屏播放页向下收起动画。

实现思路

本例中一镜到底动画分两块：1.Mini条展开和收起的一镜到底动画 2.全屏播放页上下拖动的手势动画和松手后的回弹动画。

  • Mini条展开和收起的一镜到底动画。本例中展开和收起动画(expandCollapseAnimation())大部分动画相同，且共用同一个动画对象animatorObject，主要有三部分动画组成。以Mini条展开动画为例，分为：

（1）Mini条歌曲封面缩放和X，Y轴偏移动画

（2）Mini条向上平移，高度拉伸，同时透明度降低动画

（3）全屏播放页向上平移，同时透明度增加动画

本例中使用@ohos.animator动画模块的AnimatorResult定义动画对象，通过创建AnimatorOptions动画选项，并传入create来创建Animator对象animatorObject。通过play()启动动画，在动画帧回调onframe中通过参数value获取动画进度，然后根据动画进度实时改变自定义动画相关属性AnimationInfo的值来实现Mini条展开和收起的一镜到底动画。

  • 全屏播放页上下拖动的手势动画和松手后的回弹动画。

（1）本例中全屏播放页上下拖动的手势动画和Mini条收起动画实现方式类似。Mini条收起动画是在动画帧回调onframe中通过参数value获取动画进度，而拖动手势动画是在PanGesture拖动手势的onActionUpdate移动回调中，通过滑动偏移量event.offsetY，计算动画进度，然后根据动画进度实时改变自定义动画相关属性AnimationInfo的值来实现全屏播放页上下拖动的手势动画。

（2）本例中全屏播放页拖动松手后的回弹动画使用显示动画animateTo，在PanGesture拖动手势的onActionEnd手指抬起回调中，通过前面拖动手势动画中计算的动画过程中全屏播放页Y轴位置detailsPagePositionY。判断抬手时，当全屏播放页Y轴位置小于等于1/2屏幕高度，全屏播放页做向上回弹动画。当全屏播放页Y轴位置大于1/2屏幕高度时，做向下回弹动画。

  1. Mini条展开和收起的一镜到底动画。使用@ohos.animator动画模块的AnimatorResult定义动画对象，通过创建AnimatorOptions动画选项，并传入create来创建Animator对象animatorObject。在动画帧回调onframe中通过参数value获取动画进度，然后根据动画进度实时改变自定义动画相关属性AnimationInfo的值来实现Mini条展开和收起的一镜到底动画。源码参考MiniPlayerAnimation.ets。
// 定义Animator类
this.animatorObject = animator.create(this.animatorOption);
// onfinish动画完成时回调
this.animatorObject.onfinish = () => {
  // 重置正在动画标志位
  this.animationData.isAnimating = false;
  ...
}
// onframe接收到动画帧时回调，value返回当前的动画进度。value的取值范围就是前面animatorOption中设定的动画插值起点begin到动画插值终点end。
this.animatorObject.onframe = (value: number) => {
  // 展开动画
  if (!this.animationData.isExpand) {
    // 计算当前动画进度占比。
    let progress: number = value / this.animationData.miniImgToDetailsPageImgDistance;
    // Mini条歌曲封面一镜到底动画过程中偏移的距离
    this.animationData.miniImgOffsetY = value;
    // 展开收起动画公共部分
    this.expandCollapseAnimation(progress);
  } else { // 收起动画
    // 展开动画过程和收起动画过程相反，所以这里用1-当前动画进度占比
    let progress: number = 1 - value / this.animationData.miniImgToDetailsPageImgDistance;
    // Mini条歌曲封面一镜到底动画过程中偏移的距离
    this.animationData.miniImgOffsetY = this.animationData.miniImgToDetailsPageImgDistance - value;
    // 展开收起动画公共部分
    this.expandCollapseAnimation(progress);
  }
}
  • Mini条展开和收起的一镜到底动画。通过play()启动动画。源码参考HomePage.ets。
if (this.animatorObject) {
  ...
  // 启动动画。这里为展开动画。
  this.animatorObject.play();
  this.animationInfo.isAnimating = true;
}
  • 全屏播放页上下拖动的手势动画。和Mini条收起动画实现方式类似。Mini条收起动画是在动画帧回调onframe中通过参数value获取动画进度，而拖动手势动画是在PanGesture拖动手势的onActionUpdate移动回调中，通过滑动偏移量event.offsetY，计算动画进度，然后根据动画进度实时改变自定义动画相关属性AnimationInfo的值来实现全屏播放页上下拖动的手势动画。源码参考DetailsPage.ets。
.onActionUpdate((event?: GestureEvent) => {
  if (this.animationInfo.isAnimating) {
    // 如果正在Mini条展开收起的一镜到底动画过程中，不触发手势动画
    return;
  }
  if (event) {
    // 向下滑动，offsetY为正，单位vp
    if (event.offsetY >= 0) {
      // 动画进度。向下滑动和Mini条收起动画类似.这里动画进度用1-全屏播放页下滑偏移量offsetY/Mini条距离屏幕顶部的高度miniDistanceToTop计算得到
      let progress: number = 1 - event.offsetY / this.animationInfo.miniDistanceToTop;
      // 全屏播放页下滑偏移量小于等于Mini条距离屏幕顶部的高度，做类似收起动画的滑动效果
      if (event.offsetY <= this.animationInfo.miniDistanceToTop) {
        // Mini条歌曲封面一镜到底动画过程中偏移的距离
        this.animationInfo.miniImgOffsetY = this.animationInfo.miniImgToDetailsPageImgDistance * progress;
        if (progress < Constants.ANIMATION_PROGRESS) {
          // 为了达到更好的动画效果。动画进度0%-30%时，全屏播放页Y轴偏移距离和Mini条，Mini条歌曲封面保持相同的偏移距离
          this.animationInfo.detailsPageOffsetY = this.animationInfo.miniImgOffsetY;
          // Mini条透明度。动画进度0%-30%时，Mini条透明度从1降低到0。动画进度30%-100%时，Mini条透明度为0。
          this.animationInfo.miniPlayerOpacity = 1 - progress / Constants.ANIMATION_PROGRESS;
        } else {
          // 由于动画进度0%-30%时改变了原全屏播放页的偏移距离。所以需要在动画进度30%-100%时重新计算全屏播放页Y轴偏移距离，以达到在动画进度100%时全屏播放页能偏移到屏幕顶部位置。
          this.animationInfo.detailsPageOffsetY = this.animationInfo.miniDistanceToTop * progress -
            (this.animationInfo.miniDistanceToTop - this.animationInfo.miniImgToDetailsPageImgDistance) *
            Constants.ANIMATION_PROGRESS * ((1 - Constants.ANIMATION_PROGRESS) - (progress -
            Constants.ANIMATION_PROGRESS)) / (1 - Constants.ANIMATION_PROGRESS);
          this.animationInfo.miniPlayerOpacity = 0;
        }
        // Mini条动画过程中高度拉伸大小
        this.animationInfo.miniChangeHeight = this.animationInfo.miniImgOffsetY;
        // Mini条歌曲封面动画过程中尺寸变化量
        this.animationInfo.miniImgOffsetSize = (Constants.DETAILS_PAGE_IMG_SIZE - Constants.MINI_IMG_SIZE) * progress;
        // Mini条歌曲封面动画过程中X轴偏移量。
        this.animationInfo.miniImgOffsetX = ((this.animationInfo.screenWidth - Constants.MINI_IMG_SIZE -
        this.animationInfo.miniImgOffsetSize) / 2 - Constants.MINI_POSITION_X - Constants.MINI_IMG_MARGIN_LEFT) * progress;
        /**
         * 动画进度0%-30%时，全屏播放页透明度从0上升到1。和前面Mini条透明度变化相反。
         * 为了达到更好的动画效果。在一开始全屏播放页出现时透明度快速变大。这里在动画进度0%-5%时，全屏播放页透明度从0上升到0.5，在动画进度5%-30%时
         * ，全屏播放页透明度从0.5上升到1.
         */
        if (progress <= Constants.PROGRESS_PERCENTAGE_FIVE) {
          this.animationInfo.detailsPageOpacity = progress * (1 - Constants.DETAILS_PAGE_INTERIM_OPACITY) / Constants.PROGRESS_PERCENTAGE_FIVE;
        } else if (progress < Constants.ANIMATION_PROGRESS) { // 动画进度0.1-0.3，透明度从0.5变1
          this.animationInfo.detailsPageOpacity = (progress - Constants.PROGRESS_PERCENTAGE_FIVE) * (1 -
          Constants.DETAILS_PAGE_INTERIM_OPACITY) / (Constants.ANIMATION_PROGRESS - Constants.PROGRESS_PERCENTAGE_FIVE) +
          Constants.DETAILS_PAGE_INTERIM_OPACITY;
        } else {
          this.animationInfo.detailsPageOpacity = 1;
        }
        // 动画过程中全屏播放页Y轴位置。全屏播放页Y轴位置=屏幕高度-全屏播放页Y轴偏移距离-Mini条距离屏幕底部的高度（Mini条高度+TabBar高度+底部非安全区域高度（导航栏高度））
        this.animationInfo.detailsPagePositionY = this.animationInfo.screenHeight - this.animationInfo.detailsPageOffsetY - this.animationInfo.miniDistanceToBottom;
        // 动画过程中全屏播放页Y轴位置如果在0-1/2屏幕高度，全屏播放页收起按钮父容器Row的透明度从0上升到1。动画过程中全屏播放页Y轴位置如果大于1/2屏幕高度，则全屏播放页收起按钮父容器Row的透明度为0。
        if (this.animationInfo.detailsPagePositionY <= this.animationInfo.screenHeight / 2) {
          this.animationInfo.detailsPageTopOpacity = 1 - this.animationInfo.detailsPagePositionY / (this.animationInfo.screenHeight / 2);
        } else {
          this.animationInfo.detailsPageTopOpacity = 0;
        }
      } else {
        // 全屏播放页下滑偏移量大于Mini条距离屏幕顶部的高度时，不再滑动。更新相关动画参数。
        this.animationInfo.detailsPageOpacity = 0;
        this.animationInfo.miniPlayerOpacity = 1;
        this.animationInfo.miniImgOffsetY = 0;
      }
    }
    else {
      // 如果全屏播放页已经滑到顶部位置，不再上滑。
      this.animationInfo.detailsPageOffsetY = this.animationInfo.screenHeight - this.animationInfo.miniDistanceToBottom;
    }
  }
})
  • 全屏播放页拖动松手后的回弹动画。使用显示动画animateTo，在PanGesture拖动手势的onActionEnd手指抬起回调中，通过前面拖动手势动画中计算的动画过程中全屏播放页Y轴位置detailsPagePositionY。判断抬手时，当全屏播放页Y轴位置小于等于1/2屏幕高度，全屏播放页做向上回弹动画。当全屏播放页Y轴位置大于1/2屏幕高度时，做向下回弹动画。源码参考DetailsPage.ets。
.onActionEnd(() => { // 手指抬起后触发回调
  if (this.animationInfo.isAnimating) {
    // 正在动画过程中，不执行手势回弹动画
    return;
  }
  // TODO 知识点：本例中全屏播放页拖动松手后的回弹动画使用显示动画animateTo，在PanGesture拖动手势的onActionEnd手指抬起回调中，通过前面拖动手势动画中计算的动画过程中全屏播放页Y轴位置detailsPagePositionY。判断抬手时，当全屏播放页Y轴位置小于等于1/2屏幕高度，全屏播放页做向上回弹动画。当全屏播放页Y轴位置大于1/2屏幕高度时，做向下回弹动画。
  animateTo({
    duration: Constants.REBOUND_ANIMATION_DURATION,
    curve: Curve.LinearOutSlowIn,
    onFinish: () => {
      // 向下的回弹动画结束后，重置动画相关标志位。
      if (this.animationInfo.detailsPagePositionY > this.animationInfo.screenHeight / 2) {
        this.animationInfo.isExpand = false;
        this.animationInfo.miniDistanceToBottom = 0;
        this.animationInfo.miniImgOpacity = 1;
        this.animationInfo.miniImgAnimateOpacity = 0;
      }
    }
  }, () => {
    if (this.animationInfo.detailsPagePositionY <= this.animationInfo.screenHeight / 2) {
      // 在上半屏幕手指抬起后,设置向上回弹动画属性
      this.animationInfo.detailsPageOffsetY = this.animationInfo.screenHeight - this.animationInfo.miniDistanceToBottom;
      this.animationInfo.miniImgOffsetY = this.animationInfo.miniImgToDetailsPageImgDistance;
      this.animationInfo.miniImgOffsetSize = Constants.DETAILS_PAGE_IMG_SIZE - Constants.MINI_IMG_SIZE;
      this.animationInfo.miniImgOffsetX = ((this.animationInfo.screenWidth - Constants.MINI_IMG_SIZE - this.animationInfo.miniImgOffsetSize) / 2 - Constants.MINI_POSITION_X - Constants.MINI_IMG_MARGIN_LEFT);
      this.animationInfo.detailsPageTopOpacity = 1;
    } else {
      // 在下半屏幕手指抬起后,设置向下回弹动画属性
      this.animationInfo.detailsPageOffsetY = 0;
      this.animationInfo.miniImgOffsetY = 0;
      this.animationInfo.miniImgOffsetSize = 0;
      this.animationInfo.miniPlayerOpacity = 1;
      this.animationInfo.miniImgOffsetX = 0;
      this.animationInfo.detailsPageOpacity = 0;
      this.animationInfo.miniChangeHeight = 0;
    }
  })
})

高性能知识点

  • onActionUpdate是系统高频回调函数，避免在函数中进行冗余或耗时操作。例如应该减少或避免在函数打印日志，会有较大的性能损耗。
  • LazyForEach 进行数据懒加载优化,以降低内存占用和渲染开销。
  • @Reusable复用组件优化，提升应用性能。

FAQ

  1. Mini条一镜到底动画为什么没有使用组件内隐式共享元素转场 (geometryTransition)的方式来实现。

    答：最初方案是使用geometryTransition实现Mini条里歌曲封面图的一镜到底动画，然后使用animateTo实现全屏播放页的展开收起动画，组合成一个完整的一镜到底动画。由于geometryTransition是隐式动画，歌曲封面图在动画过程中不可控。比如展开动画过程中，无法实现歌曲封面图一镜到底动画和Mini条向上平移动画保持同步。还存在歌曲封面图的一镜到底动画速度比全屏播放页向上平移的展开动画速度快，导致动画过程中歌曲封面图超出全屏播放页的问题。动画的可控性和效果不好，所以最终改用@ohos.animator动画模块的onframe方式，通过监听动画进度实时控制Mini条，歌曲封面图，全屏播放页的动画来实现一镜到底动画。

工程结构&模块类型

miniplayeranimation                               // har类型
|---view
|   |---MiniPlayerAnimation.ets                   // 视图层-首页
|---model
|   |---HomePage.ets                              // 首页模块
|   |---DetailsPage.ets                           // 全屏播放页模块
|   |---AnimationInfo.ets                         // 动画参数类
|   |---Constants.ets                             // 常量

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助~

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

 获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

2.视频学习资料+学习PDF文档

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

HarmonyOS Next 最新全套视频教程

​

 《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

《鸿蒙开发基础》

​

《鸿蒙开发进阶》

​

《鸿蒙进阶实战》

​

大厂面试必问面试题

​

鸿蒙南向开发技术

​

鸿蒙APP开发必备

​
请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

                   

代码中的爱马仕
关注
  • 14
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5049
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
HarmonyOS NEXT 音乐播放转场一镜到底效果实现
shudaoshanQAQ的博客
04-23 1349
音乐播放的Mini条播放栏在转场时的一镜到底动画是音乐播放器应用开发中常见的需求。
鸿蒙开发实战案例--抽奖App（附源码）
shudaoshanQAQ的博客
03-06 1847
实战案例--抽奖App（附源码）
鸿蒙 HarmonyOS Next 路由 不废话 全干货
制定持续可量化的目标，不断坚持。
07-05 714
（1）直接通过创建一个新的Page的方式创建（2）先创建一个 ArkTs File文件，然后在resources/base/profile/main_pages.json中加上页面对应的src路径，下面的Index_3.ets文件是通过创建ArkTs File文件生成的，需要加上src路径加上路径后的显示： 普通跳转（可以返回） 相当于栈，可以每次跳转都是入栈，每次返回都是出栈，页面栈的最大容量是32个页面提示：页面地址是resources/base/profile/main_pages.json里
鸿蒙系统究竟是PPT秀还是有真材实料？鸿蒙HarmonyOS开发环境搭建与运行Demo
软测小生
09-25 1万+
前言：对于华为而言，做鸿蒙的最好答案，也许不是为了追求眼前的速胜，而是为了不下牌桌等待机遇。手机领域，鸿蒙式微。但物联网领域，技术难度并不大，虽然行业仍需要时日才会爆发，但依然是值得卡位...
鸿蒙开发实战终极案例--高仿微信App（附源码）
shudaoshanQAQ的博客
03-06 2797
高仿微信App（附源码）
鸿蒙 HarmonyOS NEXT应用开发案例集
小北的博客
08-02 1176
随着应用代码复杂度的提升，为了提高应用的可维护性和可扩展性，良好的应用架构设计显得尤为重要。本篇文章将介绍一个应用通用架构的设计思路，旨在减少模块间的耦合、提升团队开发效率，为开发者提供一个清晰且结构化的开发框架。本文以“应用通用开发范例App”为例，从分层架构设计和模块化设计两个方面介绍应用的架构组成。
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
06-29
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
HarmonyOS NEXT应用开发性能指导
最新发布
09-04
HarmonyOS NEXT应用开发性能指导。应用开发案例集
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，让学习者能够从零开始，逐步进入鸿蒙应用开发的世界。 在这一系列的课程中，涵盖了多个关键知识点，包括但不限于： 1...
【愚公系列】2023年12月 HarmonyOS教学课程 030-ArkUI动画（布局更新动画）
热门推荐
时光隧道
12-13 6万+
动画是一种通过连续展示一系列静止的图像（称为帧）来创造出运动效果的艺术形式。它可以以手绘、计算机生成或其他各种形式呈现。在动画中，每一帧都具有微小的变化，当这些帧被快速播放时，人眼会产生视觉上的错觉，认为物体在运动。动画可以用来表达故事、观念、想法、情感或其他形式的艺术创作。它在电影、电视节目、广告、游戏和网页设计等领域中得到广泛应用。按照页面分类的动画：按照基础能力分类的动画。
手把手教你安装鸿蒙和运行第一个Demo（js）版
坚果的博客
01-19 1802
鸿蒙开发初体验 作者：坚果 公众号：“大前端之旅” 华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。 在体验之前，大家可以先看这张图，然后按图索骥，不过不会在这个教程教如何如何安装nodejs， 接下来开始正文 1.第一步，打开链接，点击下载 https://developer.harmonyos.com/cn/develop/deveco-studio/ 目前
鸿蒙开发实战案例--音乐播放器（付源码）
shudaoshanQAQ的博客
04-15 3128
今天和大家分享的是鸿蒙开发的实战项目：音乐播放器。
HarmonyOS开发案例：【音乐播放器】
鸿蒙的技术博客
04-23 2760
播放应用中的音频资源文件，并可进行上一曲、下一曲、播放、暂停、切换播放模式（顺序播放、单曲循环、随机播放）等操作。结合后台任务管理模块，实现熄屏后继续播放音频。
HarmonyOS NEXT应用开发—折叠屏音乐播放器方案
maniuT的博客
03-16 885
本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景。
鸿蒙ArkTS声明式开发：跨平台支持列表【全屏模态转场】模态转场设置
2401_82772199的博客
06-12 4911
通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。不支持横竖屏切换。
鸿蒙OS开发：【一次开发，多端部署】（音乐专辑主页）
鸿蒙的技术博客
05-20 939
本示例展示了音乐专辑主页。本示例使用一次开发多端部署中介绍的自适应布局能力和响应式布局能力进行多设备（或多窗口尺寸）适配，保证应用在不同设备或不同窗口尺寸下可以正常显示。用到了媒体查询接口[@ohos.mediaquery]。
鸿蒙 HarmonyOS Arkts ArkUI 彩色旋转线条 加载中
特创数字
01-18 686
【代码】鸿蒙 HarmonyOS Arkts ArkUI 彩色旋转线条 加载中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值