music-score/src/page-instrument/view-detail/smoothAnimation/index.ts

/**
 * 一行谱动画
 */
import { watch, ref, Ref, h, render } from "vue"
import { getAudioCurrentTime } from "/src/view/audio-list"
import state from "/src/state"
import "./index.less"
import Bird from "./bird"

type pointsPosType = { x: number; y: number; MeasureNumberXML: number; noteId: number }[]
type smoothAnimationType = {
   isShow: Ref<boolean>
   canvasDom: null | HTMLCanvasElement
   canvasCtx: null | undefined | CanvasRenderingContext2D
   canvasDomWith: number
   canvasDomHeight: number
   canvasSmoothDom: null | HTMLCanvasElement
   smoothAnimationBoxDom: null | HTMLElement
   smoothBotDom: null | HTMLElement
   osmdCanvasPageDom: null | HTMLElement
   osdmScrollDom: null | HTMLElement
   osdmScrollDomWith: number
   osdmScrollDomOffsetLeft: number
   selectionBoxDom: null | HTMLElement
   batePos: pointsPosType
   pointsPos: pointsPosType
   translateXNum: number
   aveSpeed: number
}

const _numberOfSegments = 60 // 中间切割线的个数
const _canvasDomHeight = 60 // canvans 高度

export const smoothAnimationState = {
   isShow: ref(false), // 是否显示
   canvasDom: null,
   canvasCtx: null,
   canvasDomWith: 0,
   canvasDomHeight: _canvasDomHeight,
   canvasSmoothDom: null,
   smoothAnimationBoxDom: null,
   smoothBotDom: null,
   osmdCanvasPageDom: null,
   osdmScrollDom: null,
   osdmScrollDomWith: 0,
   osdmScrollDomOffsetLeft: 0,
   selectionBoxDom: null,
   batePos: [], // times 直接转换的数组
   pointsPos: [], // 筛选之后的点坐标数组
   translateXNum: 0, // 当前谱面的translateX的距离   谱面的位置信息 由translateX和scrollLeft的偏移一起决定
   aveSpeed: 0 // 谱面的一帧的平均速度
} as smoothAnimationType

// 监听显示与隐藏
watch(smoothAnimationState.isShow, () => {
   if (smoothAnimationState.isShow.value) {
      smoothAnimationState.smoothAnimationBoxDom?.classList.remove("smoothAnimationBoxHide")
   } else {
      smoothAnimationState.smoothAnimationBoxDom?.classList.add("smoothAnimationBoxHide")
   }
})

/**
 * 初始化
 */
export function initSmoothAnimation() {
   // 创建dom
   createSmoothAnimation()
   // 初始化动画数据
   const batePos = getPointsPosByBatePos()
   smoothAnimationState.batePos = batePos
   const batePos1 = dataFilter([...batePos])
   console.log(batePos1, "排序之后的数据")
   const batePos2 = createSmoothCurvePoints(batePos1, _numberOfSegments)
   smoothAnimationState.pointsPos = batePos2
   // 初始化旋律线
   initCanvasSmooth()
   // 谱面的平均速度(因为可能有反复的情况所以实际距离要加上反复的距离)
   const canvasDomPath = batePos.reduce((path, item, index, arr) => {
      if (index !== 0) {
         if (Math.abs(item.MeasureNumberXML - arr[index - 1].MeasureNumberXML) <= 1) {
            path += item.x - arr[index - 1].x
         }
      }
      return path
   }, 0)
   // 20 是屏幕多长时间刷新一次的时间，本来是16.67的，但是有些手机帧率比较低，所以这里给小一点的值，宁愿慢一点偏屏幕左边一点
   smoothAnimationState.aveSpeed = (canvasDomPath / (state.times[state.times.length - 1].time - state.times[0].time) / 1000) * 20
   // 当前屏幕的宽度
   calcClientWidth()
   window.addEventListener("resize", calcClientWidth)
   // 初始化 只有练习模式 才显示
   state.modeType === "practise" && (smoothAnimationState.isShow.value = state.melodyLine)
   // 多分轨合并显示、打击乐、节奏练习的曲子不显示旋律线
   if (state.isCombineRender || state.isPercussion) {
      smoothAnimationState.isShow.value = false
   }
   console.log(smoothAnimationState, "一行谱小鸟数据")
}

// 排序
function dataFilter(batePos: pointsPosType) {
   // 去掉反复跳房子的数据
   const filterData = batePos.filter((item, index, array) => {
      return array.findIndex(i => i.noteId === item.noteId) === index
   })
   // 先按 音符排序
   const sortedData = filterData.sort((a, b) => a.noteId - b.noteId)
   // 再按 小节排序
   return sortedData.sort((a, b) => a.MeasureNumberXML - b.MeasureNumberXML)
}

//根据 activeInde和进度 查找转换之后的activeInde
function dataFindIndex(activeIndex: number, progress: number) {
   // 百分比转为当前的index 距离个数
   const progressCalcIndex = Math.round(progress * _numberOfSegments)
   const { noteId, MeasureNumberXML } = smoothAnimationState.batePos[activeIndex]
   return (
      smoothAnimationState.pointsPos.findIndex(item => {
         return item.noteId === noteId && item.MeasureNumberXML === MeasureNumberXML
      }) + progressCalcIndex
   )
}

/**
 * 销毁
 */
export function destroySmoothAnimation() {
   smoothAnimationState.isShow.value = false
   window.removeEventListener("resize", calcClientWidth)
   smoothAnimationState.smoothAnimationBoxDom?.remove()
   Object.assign(smoothAnimationState, {
      canvasDom: null,
      canvasCtx: null,
      canvasDomWith: 0,
      canvasDomHeight: _canvasDomHeight,
      canvasSmoothDom: null,
      smoothAnimationBoxDom: null,
      smoothBotDom: null,
      osmdCanvasPageDom: null,
      osdmScrollDom: null,
      osdmScrollDomWith: 0,
      osdmScrollDomOffsetLeft: 0,
      selectionBoxDom: null,
      batePos: [],
      pointsPos: [],
      translateXNum: 0,
      aveSpeed: 0
   })
}

/**
 * 根据播放时间进度移动处理
 */
export function moveSmoothAnimationByPlayTime(time?: number) {
   // 暂停之后不进行移动了
   if (state.playState === "paused") {
      return
   }
   const currentTime = time || getAudioCurrentTime()
   if (currentTime <= state.fixtime) return
   if (currentTime > state.times.last()?.endtime) return
   // 当休止小节，可能当前音符在谱面上没有实际的音符（没有bbox），所以往后找谱面上有的音符
   const nextIndex = state.activeNoteIndex + 1
   // 当前的音符和下一个音符之间的时值 (当是最后一个音符的时候，下一个音符的时间取当前音符的endtime)
   const noteDuration =
      (nextIndex > state.times.length - 1 ? state.times[state.activeNoteIndex]?.endtime : state.times[nextIndex].time) -
      state.times[state.activeNoteIndex]?.time
   // 妙极客曲目 有可能2个音符时值一样
   if (noteDuration <= 0) {
      return
   }
   // 当前时值在该区间的占比
   let playProgress = (currentTime - state.times[state.activeNoteIndex]?.time) / noteDuration
   // 华为手机 fixtime 有个默认0.08的值，所以进度可能为负数 ，这里兼容一下
   playProgress < 0 && (playProgress = 0)
   moveSmoothAnimation(playProgress, state.activeNoteIndex)
}

/**
 * 移动处理
 * progress  当前音符到下一个音符的距离百分比
 * activeIndex 当前
 */
export function moveSmoothAnimation(progress: number, activeIndex: number, isMoveOsmd = true) {
   // if (!smoothAnimationState.isShow.value) {
   //    return
   // }
   const nowIndex = dataFindIndex(activeIndex, progress)
   const nowPointsPos = smoothAnimationState.pointsPos[nowIndex]
   // 当x的值为null和undefinedde的时候 错误 不走下面的方法
   if (!(nowPointsPos?.x != null)) {
      console.error(nowPointsPos?.x, "nowPointsPos", nowIndex, activeIndex)
      return
   }
   // 移动
   smoothAnimationMove(
      {
         x: nowPointsPos.x - 18, //鸟的大小
         y: nowPointsPos.y - 23
      },
      smoothAnimationState.pointsPos.slice(0, nowIndex)
   )
   // 当移动到屏幕最右边时候 就不进行移动了    存在移动到屏幕最右边时候  有反复的情况需要屏幕移动。所以这里注释掉了
   // if (
   //    (smoothAnimationState.osdmScrollDom?.scrollLeft || 0) + smoothAnimationState.translateXNum + smoothAnimationState.osdmScrollDomWith >=
   //    smoothAnimationState.canvasDomWith
   // ) {
   //    return
   // }
   isMoveOsmd && move_osmd(nowPointsPos)
}

/**
 * 谱面移动逻辑
 */
function move_osmd(nowPointsPos: pointsPosType[0]) {
   // 评测移动太快看不到前面小节的分数，评测改成0.5倍速移动谱面
   const speed = (state.modeType === "evaluating" ? smoothAnimationState.aveSpeed * 0.5 : smoothAnimationState.aveSpeed) * (state.speed / 60)
   // 视口宽度
   const clientWidth = smoothAnimationState.osdmScrollDomWith
   const clientMidWidth = clientWidth / 2
   let { left, right, width } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
   left -= smoothAnimationState.osdmScrollDomOffsetLeft
   right -= smoothAnimationState.osdmScrollDomOffsetLeft
   const midBotNum = left + width / 2
   // 分阶段移动
   if (right > clientWidth) {
      // 移动超过屏幕时候
      smoothAnimationState.translateXNum = 0
      smoothAnimationState.osdmScrollDom!.scrollLeft = nowPointsPos.x - clientWidth * 0.9
   } else if (left < 0) {
      // 移动小于屏幕时候
      smoothAnimationState.translateXNum = 0
      smoothAnimationState.osdmScrollDom!.scrollLeft = nowPointsPos.x - clientWidth * 0.1
   } else if (midBotNum > clientMidWidth - clientWidth * 0.3 && midBotNum <= clientMidWidth - clientWidth * 0.25) {
      smoothAnimationState.translateXNum += speed * 0.5
   } else if (midBotNum > clientMidWidth - clientWidth * 0.25 && midBotNum <= clientMidWidth - clientWidth * 0.2) {
      smoothAnimationState.translateXNum += speed * 0.6
   } else if (midBotNum > clientMidWidth - clientWidth * 0.2 && midBotNum <= clientMidWidth - clientWidth * 0.15) {
      smoothAnimationState.translateXNum += speed * 0.7
   } else if (midBotNum > clientMidWidth - clientWidth * 0.15 && midBotNum <= clientMidWidth - clientWidth * 0.1) {
      smoothAnimationState.translateXNum += speed * 0.8
   } else if (midBotNum > clientMidWidth - clientWidth * 0.1 && midBotNum <= clientMidWidth - clientWidth * 0.05) {
      smoothAnimationState.translateXNum += speed * 0.9
   } else if (midBotNum > clientMidWidth - clientWidth * 0.05 && midBotNum <= clientMidWidth) {
      smoothAnimationState.translateXNum += speed
   } else if (midBotNum > clientMidWidth && midBotNum <= clientMidWidth + clientWidth * 0.05) {
      smoothAnimationState.translateXNum += speed * 1.2
   } else if (midBotNum > clientMidWidth + clientWidth * 0.05 && midBotNum <= clientMidWidth + clientWidth * 0.1) {
      smoothAnimationState.translateXNum += speed * 1.4
   } else if (midBotNum > clientMidWidth + clientWidth * 0.1 && midBotNum <= clientMidWidth + clientWidth * 0.15) {
      smoothAnimationState.translateXNum += speed * 1.7
   } else if (midBotNum > clientMidWidth + clientWidth * 0.15 && midBotNum <= clientMidWidth + clientWidth * 0.2) {
      smoothAnimationState.translateXNum += speed * 2
   } else if (midBotNum > clientMidWidth + clientWidth * 0.2 && midBotNum <= clientMidWidth + clientWidth * 0.25) {
      smoothAnimationState.translateXNum += speed * 2.4
   } else if (midBotNum > clientMidWidth + clientWidth * 0.25 && midBotNum <= clientMidWidth + clientWidth * 0.3) {
      smoothAnimationState.translateXNum += speed * 2.8
   } else if (midBotNum > clientMidWidth + clientWidth * 0.3 && midBotNum <= clientMidWidth + clientWidth * 0.35) {
      smoothAnimationState.translateXNum += speed * 3.3
   } else if (midBotNum > clientMidWidth + clientWidth * 0.35 && midBotNum <= clientMidWidth + clientWidth * 0.4) {
      smoothAnimationState.translateXNum += speed * 3.8
   } else if (midBotNum > clientMidWidth + clientWidth * 0.4 && midBotNum <= clientMidWidth + clientWidth * 0.45) {
      smoothAnimationState.translateXNum += speed * 4.4
   } else if (midBotNum > clientMidWidth + clientWidth * 0.45 && midBotNum <= clientMidWidth + clientWidth * 0.5) {
      smoothAnimationState.translateXNum += speed * 5
   }
   // 最多移动的位置
   const osdmScrollDomScrollLeft = smoothAnimationState.osdmScrollDom?.scrollLeft || 0
   const maxTranslateXNum = smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - osdmScrollDomScrollLeft
   if (smoothAnimationState.translateXNum > maxTranslateXNum) {
      smoothAnimationState.translateXNum = maxTranslateXNum
   }
   moveTranslateXNum(smoothAnimationState.translateXNum)
}

/**
 * 根据 translateXNum 滚动到位置
 */

export function moveTranslateXNum(translateXNum: number) {
   smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transform = `translateX(-${translateXNum}px)`)
   smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transform = `translateX(-${translateXNum}px)`)
}

/**
 * 进度条和块移动方法
 */
function smoothAnimationMove(pos: { x: number; y: number }, progresspointsPos: pointsPosType) {
   smoothAnimationState.smoothBotDom && (smoothAnimationState.smoothBotDom.style.transform = `translate(${pos.x}px, ${pos.y}px)`)
   smoothAnimationState.canvasCtx && drawSmoothCurveProgress(smoothAnimationState.canvasCtx, progresspointsPos, "#FFC121")
}

/**
 * 创建dom
 */
function createSmoothAnimation() {
   // osdmScrollDom
   const osdmScrollDom = document.querySelector("#musicAndSelection") as HTMLElement
   smoothAnimationState.osdmScrollDom = osdmScrollDom
   // osmdCanvasPage
   const osmdCanvasPageDom = document.querySelector("#osmdCanvasPage1") as HTMLElement
   smoothAnimationState.osmdCanvasPageDom = osmdCanvasPageDom
   // selectionBox
   setTimeout(() => {
      const selectionBoxDom = document.querySelector("#selectionBox") as HTMLElement
      smoothAnimationState.selectionBoxDom = selectionBoxDom
   }, 0)
   // box
   const smoothAnimationBoxDom = document.createElement("div")
   smoothAnimationBoxDom.className = "smoothAnimationBox smoothAnimationBoxHide"
   smoothAnimationState.smoothAnimationBoxDom = smoothAnimationBoxDom
   // con
   const smoothAnimationConDom = document.createElement("div")
   smoothAnimationConDom.className = "smoothAnimationCon"
   //canvas
   const smoothCanvasDom = document.createElement("canvas")
   smoothCanvasDom.className = "smoothCanvas"
   smoothAnimationState.canvasDom = smoothCanvasDom
   smoothAnimationState.canvasDomWith = osmdCanvasPageDom?.offsetWidth || 0
   smoothCanvasDom.width = smoothAnimationState.canvasDomWith
   smoothCanvasDom.height = smoothAnimationState.canvasDomHeight
   const ctx = smoothCanvasDom.getContext("2d")!
   smoothAnimationState.canvasCtx = ctx
   ctx.imageSmoothingEnabled = true
   ctx.lineCap = "round"
   ctx.lineJoin = "round"
   // bot
   const smoothBotDom = document.createElement("div")
   smoothBotDom.className = "smoothBot"
   smoothAnimationState.smoothBotDom = smoothBotDom
   // 添加小鸟
   render(h(Bird), smoothBotDom)
   smoothAnimationConDom.appendChild(smoothCanvasDom)
   smoothAnimationConDom.appendChild(smoothBotDom)
   smoothAnimationBoxDom.appendChild(smoothAnimationConDom)
   // 添加到 osmdCanvasPage1
   osmdCanvasPageDom?.insertBefore(smoothAnimationBoxDom, osmdCanvasPageDom.firstChild)
}

/**
 * 计算视口宽度
 */
export function calcClientWidth() {
   smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
   smoothAnimationState.osdmScrollDomOffsetLeft = smoothAnimationState.osdmScrollDom?.getBoundingClientRect().left || 0
}

/**
 * 根据音符获取坐标
 */
function getPointsPosByBatePos(): pointsPosType {
   // 得到音符频率数据
   const frequencyData = state.times.map(item => {
      return !item.frequency || item.frequency === -1 ? 0 : item.frequency
   })
   // 线性频率数据
   const frequencyLineData = quantileScale(frequencyData, 8, _canvasDomHeight - 8) // 最小值和最大值
   const pointsPos = state.times.reduce((posArr: any[], item, index) => {
      // 当休止小节，可能当前音符在谱面上没有实际的音符（没有bbox)
      if (item.bbox?.x != null && item.noteId != null) {
         posArr.push({
            noteId: item.noteId,
            MeasureNumberXML: item.MeasureNumberXML,
            x: item.bbox.x,
            y: _canvasDomHeight - frequencyLineData[index]
         })
      } else {
         // 连续休止小节 noteId 可能为 null,所以这里取上一个音符的id
         posArr.push({
            // 这里当第一个音符noteId为null,找不到前一个noteId，所以兼容一下
            noteId: item.noteId != null ? item.noteId : (posArr[posArr.length - 1]?.noteId != null ? posArr[posArr.length - 1]?.noteId : -1) + 0.01, // 这里+0.01 是制造一个假id
            MeasureNumberXML: item.MeasureNumberXML,
            x: item.bbox?.x != null ? item.bbox.x : posArr[posArr.length - 1]?.x || 10,
            y: _canvasDomHeight - frequencyLineData[index]
         })
      }
      return posArr
   }, [])
   // 最后一个音符延长(这里建立一个虚拟的音符延长)
   const extendPoint = {
      ...pointsPos[pointsPos.length - 1]
   }
   extendPoint.MeasureNumberXML += 100 // 防止MeasureNumberXML重复
   extendPoint.noteId += 100 // 防止noteId重复
   // 当总长度减30小于最后一个音符时候，取最后一个音符加15
   extendPoint.x = smoothAnimationState.canvasDomWith - 30 > extendPoint.x ? smoothAnimationState.canvasDomWith - 30 : extendPoint.x + 15
   pointsPos.push(extendPoint)
   return pointsPos
}

// 数据平滑算法
function quantileScale(data: number[], minRange = 0, maxRange = _canvasDomHeight) {
   const sortedData = [...data].sort((a, b) => a - b)
   return data.map(value => {
      const rank = sortedData.indexOf(value) / (sortedData.length - 1)
      const scaledValue = rank * (maxRange - minRange) + minRange
      return Math.max(minRange, Math.min(scaledValue, maxRange))
   })
}

/**
 * 使用传入的曲线的顶点坐标创建平滑曲线的顶点。
 * @param  {Array}   points  曲线顶点坐标数组，
 * @param  {Int}     numberOfSegments 平滑曲线 2 个顶点间的线段数，默认为 20
 * @return {Array}   平滑曲线的顶点坐标数组
 */
function createSmoothCurvePoints(points: pointsPosType, numSegments: number) {
   if (points.length <= 2) {
      return points
   }
   const curvePoints = []
   for (let i = 0; i < points.length - 1; i++) {
      const p0 = i > 0 ? points[i - 1] : points[i]
      const p1 = points[i]
      const p2 = points[i + 1]
      const p3 = i !== points.length - 2 ? points[i + 2] : points[i + 1]
      for (let j = 0; j < numSegments; j++) {
         const t = j / numSegments
         const t2 = t * t
         const t3 = t2 * t
         const x = 0.5 * (2 * p1.x + (-p0.x + p2.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3)
         const y = 0.5 * (2 * p1.y + (-p0.y + p2.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3)
         curvePoints.push({ x, y, MeasureNumberXML: p1.MeasureNumberXML, noteId: p1.noteId })
      }
   }
   return curvePoints
}

/** 初始化一条完整的旋律线dom */
function initCanvasSmooth() {
   const smoothDom = document.createElement("canvas")
   smoothDom.width = smoothAnimationState.canvasDomWith
   smoothDom.height = smoothAnimationState.canvasDomHeight
   const smoothDomCtx = smoothDom.getContext("2d")!
   smoothDomCtx.imageSmoothingEnabled = true
   smoothDomCtx.lineCap = "round"
   smoothDomCtx.lineJoin = "round"
   // 根据坐标花线
   drawLines(smoothDomCtx, smoothAnimationState.pointsPos, "rgba(255,255,255,0.6)")
   smoothAnimationState.canvasSmoothDom = smoothDom
}

/**
 * 根据进度画线
 */
function drawSmoothCurveProgress(context: CanvasRenderingContext2D, pointsPos: pointsPosType, color: string) {
   context.clearRect(0, 0, smoothAnimationState.canvasDomWith, smoothAnimationState.canvasDomHeight)
   smoothAnimationState.canvasSmoothDom && context.drawImage(smoothAnimationState.canvasSmoothDom, 0, 0)
   drawLines(context, pointsPos, color)
}

/**
 * 根据坐标划线
 */
function drawLines(context: CanvasRenderingContext2D, pointsPos: pointsPosType, color: string) {
   if (pointsPos.length === 0) return
   context.lineWidth = 2
   context.strokeStyle = color
   context.beginPath()
   context.moveTo(pointsPos[0].x, pointsPos[0].y)
   for (let i = 1; i < pointsPos.length; i++) {
      context.lineTo(pointsPos[i].x, pointsPos[i].y)
   }
   context.stroke()
}