解决谱面到最后会闪一下的问题

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

@@ -19,7 +19,7 @@ type smoothAnimationType = {
    osmdCanvasPageDom: null | HTMLElement
    osdmScrollDom: null | HTMLElement
    osdmScrollDomWith: number
-   osdmScrollDomOffsetWidth: number
+   osdmScrollDomOffsetLeft: number
    selectionBoxDom: null | HTMLElement
    pointsPos: pointsPosType
    translateXNum: number
@@ -39,7 +39,7 @@ export const smoothAnimationState = {
    osmdCanvasPageDom: null,
    osdmScrollDom: null,
    osdmScrollDomWith: 0,
-   osdmScrollDomOffsetWidth: 0,
+   osdmScrollDomOffsetLeft: 0,
    selectionBoxDom: null,
    pointsPos: [], // 计算之后的点坐标数组
    translateXNum: 0, // 当前谱面的translateX的距离   谱面的位置信息 由translateX和scrollLeft的偏移一起决定
@@ -105,7 +105,7 @@ export function destroySmoothAnimation() {
       osmdCanvasPageDom: null,
       osdmScrollDom: null,
       osdmScrollDomWith: 0,
-      osdmScrollDomOffsetWidth: 0,
+      osdmScrollDomOffsetLeft: 0,
       selectionBoxDom: null,
       pointsPos: [],
       translateXNum: 0,
@@ -135,10 +135,10 @@ export function moveSmoothAnimationByPlayTime(time?: number) {
    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 ){
+   // 妙极客曲目 有可能2个音符时值一样
+   if (noteDuration <= 0) {
       return
-   }   
+   }
    // 当前时值在该区间的占比
    let playProgress = (currentTime - state.times[state.activeNoteIndex]?.time) / noteDuration
    // 华为手机 fixtime 有个默认0.08的值，所以进度可能为负数 ，这里兼容一下
@@ -191,8 +191,8 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
    const clientWidth = smoothAnimationState.osdmScrollDomWith
    const clientMidWidth = clientWidth / 2
    let { left, right, width } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
-   left -= smoothAnimationState.osdmScrollDomOffsetWidth
-   right -= smoothAnimationState.osdmScrollDomOffsetWidth
+   left -= smoothAnimationState.osdmScrollDomOffsetLeft
+   right -= smoothAnimationState.osdmScrollDomOffsetLeft
    const midBotNum = left + width / 2
    // 分阶段移动
    if (right > clientWidth) {
@@ -237,8 +237,8 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
       smoothAnimationState.translateXNum += speed * 5
    }
    // 最多移动的位置
-   const maxTranslateXNum =
-      smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - (smoothAnimationState.osdmScrollDom?.scrollLeft || 0)
+   const osdmScrollDomScrollLeft = smoothAnimationState.osdmScrollDom?.scrollLeft || 0
+   const maxTranslateXNum = smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - osdmScrollDomScrollLeft
    if (smoothAnimationState.translateXNum > maxTranslateXNum) {
       smoothAnimationState.translateXNum = maxTranslateXNum
    }
@@ -266,7 +266,7 @@ function smoothAnimationMove(pos: { x: number; y: number }, pointsPos: pointsPos
  */
 export function calcClientWidth() {
    smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
-   smoothAnimationState.osdmScrollDomOffsetWidth = smoothAnimationState.osdmScrollDom?.offsetLeft || 0
+   smoothAnimationState.osdmScrollDomOffsetLeft = smoothAnimationState.osdmScrollDom?.getBoundingClientRect().left || 0
 }
 /**
  * 创建dom
@@ -473,8 +473,8 @@ function createSmoothCurvePoints(pointsPos: pointsPosType, tension?: number, clo
  */
 function drawSmoothCurve(context: CanvasRenderingContext2D, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
    context.lineWidth = 2
-   context.lineJoin = 'round';// 优化锯齿
-   context.lineCap = 'round'; // 优化锯齿
+   context.lineJoin = "round" // 优化锯齿
+   context.lineCap = "round" // 优化锯齿
    context.strokeStyle = "rgba(255,255,255,0.6)"
    drawLines(context, pointsPos)
    if (progresspointsPos?.length) {