【鸿蒙实战开发】HarmonyOS NEXT 音乐播放转场一镜到底效果实现

最新推荐文章于 2025-05-18 08:43:08 发布

「已注销」

最新推荐文章于 2025-05-18 08:43:08 发布

阅读量988

点赞数 29

CC 4.0 BY-SA版权

分类专栏：鸿蒙安卓前端文章标签： harmonyos 华为鸿蒙前端安卓

本文链接：https://blog.youkuaiyun.com/jiujidaima/article/details/141789879

介绍

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

效果图预览

0030086000753188655.20240419093813.28177166522926271627282929969929.gif

使用说明

打开首页，点击Mini条，可查看Mini条展开动画。
点击全屏播放页左上角收起按钮，实现收起动画。
点击Mini条展开全屏播放页，手指按住全屏播放页向下拖动，当全屏播放页拖动到屏幕的上半部分（即屏幕高度的前50%位置）时松手，可查看全屏播放页向上回弹动画。
点击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屏幕高度时，做向下回弹动画。

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

// 定义Animator类
this.animatorObject = animator.create(this.animatorOption);
// onfinish动画完成时回调
this.animatorObject.onfinish = () => {
  // 重置正在动画标志位
  this.animationData.isAnimating =