vue_music:播放器（三）动画

1.播放器进入动画

2.播放器旋转动画

当播放器播放的时候，图片旋转，暂停的时候停止旋转

2.1 html部分

<div class="cd-wrapper" ref="cdWrapper">
  <div class="cd" :class="cdCls">
    <img class="image" :src="currentSong.image">
  </div>
</div>

2.2 计算属性定义class

computed:{

cdCls() {
  return this.playing ? 'play' : 'play pause'
},

}
播放状态的时候，添加class:play 开始动画
暂停状态的时候，添加class:play pause 暂停动画

3.normal播放器切换mini播放器

这里用到了create-keyframe-animation插件

3.1计算位置、比例

//获取底部播放器，小旋转图片初始位置
_getPosAndScale() {
  //底部旋转小图片的宽度
  const targeWidth = 40
  //底部旋转小图片圆心距离左边的距离
  const paddingLeft = 40
  //底部旋转小图片圆心距离底部的距离
  const paddingBottom = 30
  //顶部旋转大图片容器距离顶部的距离
  const paddingTop = 80
  //顶部旋转大图片宽度 根绝css  width: 80%
  const width = window.innerWidth * 0.8
  //初始缩放比例
  const scale = targeWidth / width
  //横坐标：负数，因为是从小往上
  const x = -(window.innerWidth / 2 - paddingLeft)
  //纵坐标：正数
  const y = window.innerHeight - paddingTop - width / 2 - paddingBottom
  return {
    x,
    y,
    scale
  }
},

3.2 mini 播放器切换 → normal播放器

进入中 （飞入的画面，cdImage先变大1.1后恢复1.0）......

enter(el, done) {
  const {x, y, scale} = this._getPosAndScale()

  let animation = {
    0: {
      transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
    },
    60: {
      transform: `translate3d(0,0,0) scale(1.1)`
    },
    100: {
      transform: `translate3d(0,0,0) scale(1)`
    }
  }
  // this creates the animation above
  animations.registerAnimation({
    name: 'move',
    // the actual array of animation changes
    animation,
    // optional presets for when actually running the animation
    presets: {
      duration: 400,
      easing: 'linear'
    }
  })
  // then run it
  animations.runAnimation(this.$refs.cdWrapper, 'move', done)
},
//mini 播放器切换 →   normal播放器   进入中......
afterEnter() {
  //过渡完成后取消注册
  animations.unregisterAnimation('move')
  //过渡完成后清空动画
  this.$refs.cdWrapper.style.animation = ''
},

3.3normal 播放器切换→ mini 播放器

//离开时......
leave(el, done) {
  this.$refs.cdWrapper.style.transition = 'all 0.4s'
  const {x, y, scale} = this._getPosAndScale()
  this.$refs.cdWrapper.style[transform] = `translate3d(${x}px,${y}px,0) scale(${scale})`

  const timer = setTimeout(done, 400)
  this.$refs.cdWrapper.addEventListener('transitionend', () => {
    clearTimeout(timer)
    done()
  })
},
//normal 播放器切换→  mini 播放器    离开时......
afterLeave() {
  //过渡完成后取消过渡
  this.$refs.cdWrapper.style.transition = ''
  this.$refs.cdWrapper.style[transform] = ''
},

4.mini播放器过渡动画