Merge branch 'hqyDevNewVersion' of http://git.dayaedu.com/liushengqiang/music-score into feature-tianyong-newVersion

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

@@ -148,7 +148,7 @@ const moveState = {
    progress: 0,
    activeIndex: 0
 }
-export function moveSmoothAnimation(progress: number, activeIndex: number) {
+export function moveSmoothAnimation(progress: number, activeIndex: number, isMoveOsmd = true) {
    moveState.progress = progress
    moveState.activeIndex = activeIndex
    // if (!smoothAnimationState.isShow.value) {
@@ -176,14 +176,14 @@ export function moveSmoothAnimation(progress: number, activeIndex: number) {
       smoothAnimationState.pointsPos,
       smoothAnimationState.pointsPos.slice(0, nowIndex)
    )
-   // 当移动到屏幕最右边时候 就不进行移动了
-   if (
-      (smoothAnimationState.osdmScrollDom?.scrollLeft || 0) + smoothAnimationState.translateXNum + smoothAnimationState.osdmScrollDomWith >=
-      smoothAnimationState.canvasDomWith
-   ) {
-      return
-   }
-   move_osmd(nowPointsPos)
+   // 当移动到屏幕最右边时候 就不进行移动了    存在移动到屏幕最右边时候  有反复的情况需要屏幕移动。所以这里注释掉了
+   // if (
+   //    (smoothAnimationState.osdmScrollDom?.scrollLeft || 0) + smoothAnimationState.translateXNum + smoothAnimationState.osdmScrollDomWith >=
+   //    smoothAnimationState.canvasDomWith
+   // ) {
+   //    return
+   // }
+   isMoveOsmd && move_osmd(nowPointsPos)
 }
 
 /**

src/state.ts

@@ -1628,12 +1628,15 @@ export const moveSvgDom = (skipNote?: boolean) => {
    * 当前选中的音符和第一个音符之间的间距
    */
   if (skipNote) {
+    // 点击 清空translateXNum
+    smoothAnimationState.translateXNum = 0
+    moveTranslateXNum(0)
+    // 移动小鸟的位置
+    moveSmoothAnimation(0, state.activeNoteIndex, false)
+    // 移动谱面当当前音符的位置
     const noteWidth = state.times[state.activeNoteIndex].bbox?.originWidth || state.times[state.activeNoteIndex].bbox?.width;
     const firstNoteWidth = state.times[0].bbox?.originWidth || state.times[0].bbox?.width;
     const distance = state.times[state.activeNoteIndex].bbox?.x - state.times[0].bbox?.x + noteWidth / 2 - firstNoteWidth / 2;
-    // 点击 清空translateXNum
-    smoothAnimationState.translateXNum = 0
-    moveSmoothAnimation(0, state.activeNoteIndex)
     smoothAnimationState.osdmScrollDom!.scrollTo({
       left: distance,
       behavior: "smooth",
@@ -1650,9 +1653,12 @@ watch(
       // 当在播放中暂停 执行这个方法
       if (!state.playEnd && state.playState === "paused") {
         moveTranslateXNum(0)
-        const scrollLeft = smoothAnimationState.osdmScrollDom!.scrollLeft
-        smoothAnimationState.osdmScrollDom!.scrollLeft = scrollLeft + smoothAnimationState.translateXNum
-        smoothAnimationState.translateXNum = 0
+        // 因为safari浏览器scrollWidth的值一直变化，scrollLeft + smoothAnimationState.translateXNum 为最大宽度的时候，实际上scrollLeft滚不到最大宽度，所以在下一帧处理滚动，能滚动到最大滚动位置
+        requestAnimationFrame(() => {
+          const scrollLeft = smoothAnimationState.osdmScrollDom!.scrollLeft
+          smoothAnimationState.osdmScrollDom!.scrollLeft = scrollLeft + smoothAnimationState.translateXNum
+          smoothAnimationState.translateXNum = 0
+        });
       }
     }
   }