#鸿蒙通关秘籍#如何实现HarmonyOS音乐播放Mini条的一镜到底动画效果

为了在HarmonyOS中实现音乐播放Mini条的一镜到底动画效果，主要涉及到两个关键部分：Mini条的展开和收起动画，以及全屏播放页的上下拖动动画。

1. Mini条展开和收起动画：

   • 使用@ohos.animator模块的AnimatorResult来定义动画对象。通过AnimatorOptions设置动画选项，并通过create调用生成Animator对象（例如animatorObject）。在onframe函数中获取动画进度，实时更新动画属性。

   this.animatorObject = animator.create(this.animatorOption);
   this.animatorObject.onfinish = () => {
     this.animationData.isAnimating = false;
   }
   this.animatorObject.onframe = (value: number) => {
     let progress = this.animationData.isExpand ? 1 - (value / this.animationData.miniImgToDetailsPageImgDistance) : value / this.animationData.miniImgToDetailsPageImgDistance;
     this.animationData.miniImgOffsetY = this.animationData.isExpand ? this.animationData.miniImgToDetailsPageImgDistance - value : value;
     this.expandCollapseAnimation(progress);
   }
   

2. 启动动画：

   • 通过play()方法启动动画。

   if (this.animatorObject) {
     this.animatorObject.play();
     this.animationInfo.isAnimating = true;
   }
   

3. 全屏播放页上下拖动手势动画：

   • 类似于Mini条收起动画，通过PanGesture的onActionUpdate回调中使用event.offsetY计算动画进度并更新相关属性。

   .onActionUpdate((event?: GestureEvent) => {
     if (this.animationInfo.isAnimating) return;
     if (event) {
       let progress = 1 - event.offsetY / this.animationInfo.miniDistanceToTop;
       if (event.offsetY <= this.animationInfo.miniDistanceToTop) {
         this.animationInfo.miniImgOffsetY = this.animationInfo.miniImgToDetailsPageImgDistance * progress;
         this.adjustAnimationBasedOnProgress(progress);
       }
     }
   })
   

4. 拖动松手后的回弹动画：

   • 使用animateTo函数来实现回弹动画，在onActionEnd回调中判断全屏播放页的Y轴位置，执行相关回弹操作。

   .onActionEnd(() => {
     if (this.animationInfo.isAnimating) return;
   
     animateTo({
       duration: Constants.REBOUND_ANIMATION_DURATION,
       curve: Curve.LinearOutSlowIn,
       onFinish: () => {
         if (this.animationInfo.detailsPagePositionY > this.animationInfo.screenHeight / 2) {
           this.animationInfo.isExpand = false;
           this.resetAnimationParams();
         }
       }
     }, this.determineReboundDirection());
   })
   

综上，通过上述的详细步骤即可实现HarmonyOS中音乐播放Mini条的一镜到底动画效果。