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

介绍

音乐播放的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()