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 }[]
type smoothAnimationType = {
   isShow: Ref<boolean>
   canvasDom: null | HTMLCanvasElement
   canvasCtx: null | undefined | CanvasRenderingContext2D
   canvasDomWith: number
   canvasDomHeight: number
   smoothAnimationBoxDom: null | HTMLElement
   smoothBotDom: null | HTMLElement
   osmdCanvasPageDom: null | HTMLElement
   osdmScrollDom: null | HTMLElement
   osdmScrollDomWith: number
   osdmScrollDomOffsetWidth: number
   selectionBoxDom: null | HTMLElement
   pointsPos: pointsPosType
   translateXNum: number
   aveSpeed: number
}

const _numberOfSegments = 58 // 中间切割线的个数

export const smoothAnimationState = {
   isShow: ref(false), // 是否显示
   canvasDom: null,
   canvasCtx: null,
   canvasDomWith: 0,
   canvasDomHeight: 80,
   smoothAnimationBoxDom: null,
   smoothBotDom: null,
   osmdCanvasPageDom: null,
   osdmScrollDom: null,
   osdmScrollDomWith: 0,
   osdmScrollDomOffsetWidth: 0,
   selectionBoxDom: null,
   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()
   console.log(batePos, "batePos")
   smoothAnimationState.pointsPos = createSmoothCurvePoints(batePos, undefined, undefined, _numberOfSegments)
   // 谱面的平均速度(因为可能有反复的情况所以实际距离要加上反复的距离)
   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 = true)
   // 多分轨合并显示、打击乐、节奏练习的曲子不显示旋律线
   if (state.isCombineRender || state.isPercussion) {
      smoothAnimationState.isShow.value = false
   }
   console.log(smoothAnimationState, "一行谱小鸟数据")
}

/**
 * 销毁
 */
export function destroySmoothAnimation() {
   smoothAnimationState.isShow.value = false
   window.removeEventListener("resize", calcClientWidth)
   smoothAnimationState.smoothAnimationBoxDom?.remove()
   Object.assign(smoothAnimationState, {
      canvasDom: null,
      canvasCtx: null,
      canvasDomWith: 0,
      canvasDomHeight: 80,
      smoothAnimationBoxDom: null,
      smoothBotDom: null,
      osmdCanvasPageDom: null,
      osdmScrollDom: null,
      osdmScrollDomWith: 0,
      osdmScrollDomOffsetWidth: 0,
      selectionBoxDom: null,
      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），所以往后找谱面上有的音符
   let nextIndex = state.activeNoteIndex + 1
   let nextBBox = state.times[nextIndex]?.bbox
   while (!nextBBox && nextIndex < state.times.length) {
      nextIndex += 1
      nextBBox = state.times[nextIndex]?.bbox
   }
   // 当前的音符和下一个音符之间的时值 (当是最后一个音符的时候，下一个音符的时间取当前音符的endtime)
   const noteDuration =
      (nextIndex > state.times.length - 1 ? state.times[state.activeNoteIndex]?.endtime : state.times[nextIndex].time) -
      state.times[state.activeNoteIndex]?.time
   // 当前时值在该区间的占比
   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
   // }
   // 计算 下一个音符index 在pointsPos 中的距离
   const nextPointsIndex = (activeIndex + 1) * (_numberOfSegments + 1) - 1
   // 百分比转为当前的index 距离个数
   const progressCalcIndex = Math.round(progress * _numberOfSegments)
   // // 当前的index
   let nowIndex = nextPointsIndex - _numberOfSegments + progressCalcIndex
   const nowPointsPos = smoothAnimationState.pointsPos[nowIndex]
   smoothAnimationState.canvasCtx?.clearRect(0, 0, smoothAnimationState.canvasDomWith, smoothAnimationState.canvasDomHeight)
   // 移动
   smoothAnimationMove(
      {
         x: nowPointsPos.x - 18,
         y: nowPointsPos.y - 23
      },
      smoothAnimationState.pointsPos,
      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]) {
   const speed = smoothAnimationState.aveSpeed * (state.speed / 60)
   // 视口宽度
   const clientWidth = smoothAnimationState.osdmScrollDomWith
   const clientMidWidth = clientWidth / 2
   let { left, right, width } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
   left -= smoothAnimationState.osdmScrollDomOffsetWidth
   right -= smoothAnimationState.osdmScrollDomOffsetWidth
   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 maxTranslateXNum =
      smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - (smoothAnimationState.osdmScrollDom?.scrollLeft || 0)
   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 }, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
   smoothAnimationState.smoothBotDom && (smoothAnimationState.smoothBotDom.style.transform = `translate(${pos.x}px, ${pos.y}px)`)
   smoothAnimationState.canvasCtx && drawSmoothCurve(smoothAnimationState.canvasCtx, pointsPos, progresspointsPos)
}
/**
 * 计算视口宽度
 */
export function calcClientWidth() {
   smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
   smoothAnimationState.osdmScrollDomOffsetWidth = smoothAnimationState.osdmScrollDom?.offsetLeft || 0
}
/**
 * 创建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
   smoothAnimationState.canvasCtx = smoothCanvasDom.getContext("2d")
   // 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)
}

/**
 * 根据音符获取坐标
 */
function getPointsPosByBatePos(): pointsPosType {
   let totalAvInde = 0
   // 取平均值
   const totalAv =
      state.times.reduce((total, item) => {
         if (item.frequency !== -1) {
            // -1 为休止符
            total += item.frequency
            totalAvInde++
         }
         return total
      }, 0) / totalAvInde
   const pointsPos = state.times.reduce((posArr: any[], item) => {
      // 当休止小节，可能当前音符在谱面上没有实际的音符（没有bbox），所以往后找谱面上有的音符
      if (item.bbox) {
         posArr.push({
            MeasureNumberXML: item.MeasureNumberXML,
            x: item.bbox.x,
            // 当为休止符的时候 取最下面的位置*0.9，确保能显示完整
            y:
               smoothAnimationState.canvasDomHeight / 2 -
               ((((item.frequency === -1 ? 2 * totalAv * 0.1 : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2
         })
      }
      return posArr
   }, [])
   // 最后一个音符延长(这里建立一个虚拟的音符延长)
   const extendPoint = {
      ...pointsPos[pointsPos.length - 1]
   }
   extendPoint.MeasureNumberXML++
   // 当总长度减30小于最后一个音符时候，取最后一个音符加15
   extendPoint.x = smoothAnimationState.canvasDomWith - 30 > extendPoint.x ? smoothAnimationState.canvasDomWith - 30 : extendPoint.x + 15
   pointsPos.push(extendPoint)
   return pointsPos
}

/**
 * 使用传入的曲线的顶点坐标创建平滑曲线的顶点。
 * @param  {Array}   points  曲线顶点坐标数组，
 * @param  {Float}   tension 密集程度，默认为 0.5
 * @param  {Boolean} closed  是否创建闭合曲线，默认为 false
 * @param  {Int}     numberOfSegments 平滑曲线 2 个顶点间的线段数，默认为 20
 * @return {Array}   平滑曲线的顶点坐标数组
 */
function createSmoothCurvePoints(pointsPos: pointsPosType, tension?: number, closed?: boolean, numberOfSegments?: number) {
   if (pointsPos.length <= 2) {
      return pointsPos
   }
   tension = tension ? tension : 0.5
   closed = closed ? true : false
   numberOfSegments = numberOfSegments ? numberOfSegments : 20
   let ps = pointsPos.slice(0),
      result = [],
      x,
      y,
      t1x,
      t2x,
      t1y,
      t2y,
      c1,
      c2,
      c3,
      c4,
      st,
      t,
      i
   if (closed) {
      ps.unshift(pointsPos[pointsPos.length - 1])
      ps.unshift(pointsPos[pointsPos.length - 1])
      ps.push(pointsPos[0])
   } else {
      ps.unshift(pointsPos[0])
      ps.push(pointsPos[pointsPos.length - 1])
   }
   for (i = 1; i < ps.length - 2; i += 1) {
      //console.log(ps[i + 1].MeasureNumberXML, ps[i - 1].MeasureNumberXML, ps[i + 2].MeasureNumberXML, ps[i].MeasureNumberXML)
      t1x = (ps[i + 1].x - ps[i - 1].x) * tension
      t2x = (ps[i + 2].x - ps[i].x) * tension
      t1y = (ps[i + 1].y - ps[i - 1].y) * tension
      t2y = (ps[i + 2].y - ps[i].y) * tension
      // 当中途出现反复 刚开始反复时候 53 52 22 52  (22)中途值会变小 这里强行拉大 防止算法平均值出现很大偏差
      if (ps[i + 1].MeasureNumberXML - ps[i + 2].MeasureNumberXML > 1) {
         const nowNumberXML = ps[i + 1].MeasureNumberXML + 1
         //在当前值的情况下 向前一位
         let index = ps.findIndex(item => {
            return nowNumberXML === item.MeasureNumberXML
         })
         // 查询不到index时候取当前值
         index === -1 && (index = i + 1)
         t2x = (ps[index].x - ps[i].x) * tension
      }
      // 当中途出现反复 结束反复时候 22 53 22 22  (53)中途值会变大 这里强行缩小 防止算法平均值出现很大偏差
      if (ps[i - 1].MeasureNumberXML - ps[i].MeasureNumberXML > 1) {
         //在当前值的情况下 向后一位
         const nowNumberXML = ps[i].MeasureNumberXML - 1
         let index = ps.findIndex((item, index) => {
            return nowNumberXML === item.MeasureNumberXML && nowNumberXML !== ps[index + 1]?.MeasureNumberXML
         })
         // 查询不到index时候取当前值
         index === -1 && (index = i)
         t1x = (ps[i + 1].x - ps[index].x) * tension
      }
      // 当中途出现跳房子 刚开始跳房子时候 35 35 54 35  (54)中途值会变大 这里强行缩小 防止算法平均值出现很大偏差
      if (ps[i + 1].MeasureNumberXML - ps[i + 2].MeasureNumberXML < -1) {
         const nowNumberXML = ps[i + 1].MeasureNumberXML + 1
         //在当前值的情况下 向前一位
         let index = ps.findIndex(item => {
            return nowNumberXML === item.MeasureNumberXML
         })
         // 查询不到index时候取当前值
         index === -1 && (index = i + 1)
         t2x = (ps[index].x - ps[i].x) * tension
      }
      // 当中途出现跳房子 结束跳房子时候 54 35 54 54  (35)中途值会变小 这里强行拉大 防止算法平均值出现很大偏差
      if (ps[i - 1].MeasureNumberXML - ps[i].MeasureNumberXML < -1) {
         const nowNumberXML = ps[i].MeasureNumberXML - 1
         let index = ps.findIndex((item, index) => {
            return nowNumberXML === item.MeasureNumberXML && nowNumberXML !== ps[index + 1]?.MeasureNumberXML
         })
         // 查询不到index时候取当前值
         index === -1 && (index = i)
         t1x = (ps[i + 1].x - ps[index].x) * tension
      }
      const nowMeasureNumberXML = pointsPos[i - 1].MeasureNumberXML
      const nextMeasureNumberXML = pointsPos[i].MeasureNumberXML
      for (t = 0; t <= numberOfSegments; t++) {
         // 小于1时候是反复   大于1是跳房子  不画曲线  停留
         if (nextMeasureNumberXML - nowMeasureNumberXML < 0 || nextMeasureNumberXML - nowMeasureNumberXML > 1) {
            //console.log(x, y)
            result.push({
               x: x as number,
               y: y as number,
               MeasureNumberXML: nowMeasureNumberXML
            })
            continue
         }
         st = t / numberOfSegments
         c1 = 2 * Math.pow(st, 3) - 3 * Math.pow(st, 2) + 1
         c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2)
         c3 = Math.pow(st, 3) - 2 * Math.pow(st, 2) + st
         c4 = Math.pow(st, 3) - Math.pow(st, 2)
         x = c1 * ps[i].x + c2 * ps[i + 1].x + c3 * t1x + c4 * t2x
         y = c1 * ps[i].y + c2 * ps[i + 1].y + c3 * t1y + c4 * t2y
         //console.log(x, y)
         result.push({
            x,
            y,
            MeasureNumberXML: t === numberOfSegments ? nextMeasureNumberXML : nowMeasureNumberXML
         })
      }
   }
   return result
}
/**
 * 根据坐标划线
 */
function drawSmoothCurve(context: CanvasRenderingContext2D, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
   context.lineWidth = 2
   context.lineJoin = 'round';// 优化锯齿
   context.lineCap = 'round'; // 优化锯齿
   context.strokeStyle = "rgba(255,255,255,0.6)"
   drawLines(context, pointsPos)
   if (progresspointsPos?.length) {
      context.strokeStyle = "#FFC121"
      drawLines(context, progresspointsPos)
   }
}
function drawLines(context: CanvasRenderingContext2D, points: pointsPosType) {
   context.beginPath()
   context.moveTo(points[0].x, points[0].y)
   for (let i = 1; i < points.length - 1; i++) {
      if (Math.abs(points[i].MeasureNumberXML - points[i - 1].MeasureNumberXML) > 1) {
         // 取消反复和跳房子连线
         context.stroke()
         context.beginPath()
         context.moveTo(points[i + 1].x, points[i + 1].y)
         continue
      }
      context.lineTo(points[i].x, points[i].y)
   }
   context.stroke()
}