一行谱 新动画

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

@@ -41,4 +41,8 @@
         top: var(--musicAndSelectionTop);
         width: 100vw;
     }
+    /* 一行谱翻页动画 */
+    #osmdCanvasPage1,#selectionBgBox,#selectionBox{
+        transition: transform 0.6s;
+    }
 }

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

@@ -214,7 +214,39 @@ export function moveSmoothAnimation(progress: number, activeIndex: number, isMov
    // ) {
    //    return
    // }
-   isMoveOsmd && move_osmd(nowPointsPos)
+   //isMoveOsmd && move_osmd(nowPointsPos)
+   isMoveOsmd && pageTurn_osmd(nowPointsPos)
+}
+
+/**
+ * 谱面翻页逻辑
+ */
+let pageTurnLock = false
+function pageTurn_osmd(nowPointsPos: pointsPosType[0]) {
+   if (pageTurnLock) return
+   // 视口宽度
+   const clientWidth = smoothAnimationState.osdmScrollDomWith
+   let { left, right } = smoothAnimationState.smoothBotDom!.getBoundingClientRect()
+   left -= smoothAnimationState.osdmScrollDomOffsetLeft
+   right -= smoothAnimationState.osdmScrollDomOffsetLeft
+   if (right > clientWidth || left < 0) {
+      // 移动超过屏幕时候;移动小于屏幕时候
+      smoothAnimationState.translateXNum = 0
+      smoothAnimationState.osdmScrollDom!.scrollLeft = nowPointsPos.x - clientWidth * 0.1
+      moveTranslateXNum(smoothAnimationState.translateXNum)
+   } else if (right > clientWidth * 0.8) {
+      const osdmScrollDomScrollLeft = smoothAnimationState.osdmScrollDom?.scrollLeft || 0
+      const maxTranslateXNum = smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - osdmScrollDomScrollLeft
+      // 当还能翻页时候触发
+      if (maxTranslateXNum > smoothAnimationState.translateXNum) {
+         smoothAnimationState.translateXNum += clientWidth * 0.8 - state.times[0].bbox?.x
+         if (smoothAnimationState.translateXNum > maxTranslateXNum) {
+            smoothAnimationState.translateXNum = maxTranslateXNum
+         }
+         pageTurnLock = true
+         moveTranslateXNum(smoothAnimationState.translateXNum)
+      }
+   }
 }
 
 /**
@@ -286,9 +318,24 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
  */
 
 export function moveTranslateXNum(translateXNum: number) {
-   smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transform = `translateX(-${translateXNum}px)`)
-   smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transform = `translateX(-${translateXNum}px)`)
-   smoothAnimationState.selectionBgBoxDom && (smoothAnimationState.selectionBgBoxDom.style.transform = `translateX(-${translateXNum}px)`)
+   // translateXNum为0的时候不触发过度动画
+   if (translateXNum === 0) {
+      smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transition = `none`)
+      smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transition = `none`)
+      smoothAnimationState.selectionBgBoxDom && (smoothAnimationState.selectionBgBoxDom.style.transition = `none`)
+      smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transform = `translateX(-${translateXNum}px)`)
+      smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transform = `translateX(-${translateXNum}px)`)
+      smoothAnimationState.selectionBgBoxDom && (smoothAnimationState.selectionBgBoxDom.style.transform = `translateX(-${translateXNum}px)`)
+      smoothAnimationState.smoothBotDom?.offsetHeight
+      smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transition = "")
+      smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transition = "")
+      smoothAnimationState.selectionBgBoxDom && (smoothAnimationState.selectionBgBoxDom.style.transition = "")
+      pageTurnLock = false
+   } else {
+      smoothAnimationState.osmdCanvasPageDom && (smoothAnimationState.osmdCanvasPageDom.style.transform = `translateX(-${translateXNum}px)`)
+      smoothAnimationState.selectionBoxDom && (smoothAnimationState.selectionBoxDom.style.transform = `translateX(-${translateXNum}px)`)
+      smoothAnimationState.selectionBgBoxDom && (smoothAnimationState.selectionBgBoxDom.style.transform = `translateX(-${translateXNum}px)`)
+   }
 }
 
 /**
@@ -309,6 +356,9 @@ function createSmoothAnimation() {
    // osmdCanvasPage
    const osmdCanvasPageDom = document.querySelector("#osmdCanvasPage1") as HTMLElement
    smoothAnimationState.osmdCanvasPageDom = osmdCanvasPageDom
+   smoothAnimationState.osmdCanvasPageDom.addEventListener("transitionend", () => {
+      pageTurnLock = false
+   })
    // selectionBox
    setTimeout(() => {
       const selectionBoxDom = document.querySelector("#selectionBox") as HTMLElement

src/state.ts

@@ -1286,7 +1286,7 @@ let offsetTop = 0;
 export const scrollViewNote = () => {
   // const cursorElement = document.getElementById("cursorImg-0")!;
   const noteId = state.times[state.activeNoteIndex].id;
-  if (!noteId) {
+  if (!noteId || state.isSingleLine) {
     return;
   }
   const domId = "vf" + noteId;
@@ -1943,9 +1943,7 @@ export const moveSvgDom = (skipNote?: boolean) => {
     // 移动小鸟的位置
     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;
+    const distance = state.times[state.activeNoteIndex].bbox?.x - state.times[0].bbox?.x
     smoothAnimationState.osdmScrollDom!.scrollTo({
       left: distance,
       behavior: "smooth",