优化性能

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

@@ -70,6 +70,7 @@ export function initSmoothAnimation() {
    const batePos = getPointsPosByBatePos()
    smoothAnimationState.batePos = batePos
    const batePos1 = dataFilter([...batePos])
+   console.log(batePos1, "排序之后的数据")
    const batePos2 = createSmoothCurvePoints(batePos1, _numberOfSegments)
    smoothAnimationState.pointsPos = batePos2
    // 初始化旋律线

src/state.ts

@@ -1006,7 +1006,9 @@ export const gotoNext = (note: any, skipNote?: boolean) => {
       console.log(error);
     }
     // 重置 或者切换演奏演唱的时候 可能出现 state.activeNoteIndex === note.i的情况 执行
-    fillWordColor();
+    if(state.playState === "paused"){
+      fillWordColor();
+    }
     if (state.isSingleLine && state.playState === "paused") {
       moveSvgDom(skipNote);
     }
@@ -1778,22 +1780,26 @@ export const addNoteBBox = (list: any[]) => {
 }
 
 // 给歌词和音符添加动态颜色
+let prevActiveNoteIndex = -1 // 上一个激活的
 export const fillWordColor = () => {
-  // console.log('当前音符',state.activeNoteIndex)
-  state.times.forEach((item: any, idx: number) => {
-    const svgEl = document.getElementById(`vf-${state.times[idx]?.svgElement?.attrs?.id}`)
-    const stemEl = document.getElementById(`vf-${state.times[idx]?.svgElement?.attrs?.id}-stem`)
-    const stemLine = document.getElementById(`vf-${state.times[idx]?.svgElement?.attrs?.id}-lines`)
-    if ((item.i === state.activeNoteIndex || item.id === state.times[state.activeNoteIndex].id) && item.svgElement) {
-      svgEl?.classList.add('noteActive')
-      stemEl?.classList.add('noteActive')
-      stemLine?.classList.add('noteActive')
-    } else {
-      svgEl?.classList.remove('noteActive')
-      stemEl?.classList.remove('noteActive')
-      stemLine?.classList.remove('noteActive')
-    }
-  })
+  // console.log('当前音符',state.activeNoteIndex,prevActiveNoteIndex)
+  if(prevActiveNoteIndex !== -1) {
+    const prevActiveNoteId = state.times[prevActiveNoteIndex]?.svgElement?.attrs?.id
+    const svgEl = document.getElementById(`vf-${prevActiveNoteId}`)
+    const stemEl = document.getElementById(`vf-${prevActiveNoteId}-stem`)
+    const stemLine = document.getElementById(`vf-${prevActiveNoteId}-lines`)
+    svgEl?.classList.remove('noteActive')
+    stemEl?.classList.remove('noteActive')
+    stemLine?.classList.remove('noteActive')
+  }
+  const activeNoteId = state.times[state.activeNoteIndex]?.svgElement?.attrs?.id
+  const svgEl = document.getElementById(`vf-${activeNoteId}`)
+  const stemEl = document.getElementById(`vf-${activeNoteId}-stem`)
+  const stemLine = document.getElementById(`vf-${activeNoteId}-lines`)
+  svgEl?.classList.add('noteActive')
+  stemEl?.classList.add('noteActive')
+  stemLine?.classList.add('noteActive')
+  prevActiveNoteIndex = state.activeNoteIndex
 
   // 给当前匹配到的歌词添加颜色
   const currentNote = state.times[state.activeNoteIndex];