improve: lyric scroll

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "aquavox",
-	"version": "1.9.0",
+	"version": "1.9.1",
 	"private": false,
 	"scripts": {
 		"dev": "vite dev",
@@ -38,6 +38,7 @@
 	"type": "module",
 	"dependencies": {
 		"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+		"bezier-easing": "^2.1.0",
 		"jotai": "^2.8.0",
 		"jotai-svelte": "^0.0.2",
 		"localforage": "^1.10.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@esbuild-plugins/node-globals-polyfill':
     specifier: ^0.2.3
     version: 0.2.3(esbuild@0.20.2)
+  bezier-easing:
+    specifier: ^2.1.0
+    version: 2.1.0
   jotai:
     specifier: ^2.8.0
     version: 2.8.0
@@ -930,6 +933,10 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
 
+  /bezier-easing@2.1.0:
+    resolution: {integrity: sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==}
+    dev: false
+
   /binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}

src/lib/components/lyrics.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+    import BezierEasing from 'bezier-easing';
     import type { Line } from 'srt-parser-2';
     export let lyrics: string[];
     export let originalLyrics: Line[];
     export let progress: number;
     function userSlideProgress() {
         systemCouldScrollSince = 0;
-    };
+    }
     export { userSlideProgress };
 
     let currentScrollPos = '';
@@ -30,15 +31,18 @@
         function animateScroll(timestamp: number) {
             const elapsedTime = timestamp - startTime;
             const progress = Math.min(elapsedTime / duration, 1);
-            const easedProgress = timingFunction(progress, 1.1, 0, 1, 1);
+            const easedProgress = timingFunction(progress, 0.38, 0, 0.24, 0.99);
             element.scrollTop = start + change * easedProgress;
 
             console.log(elapsedTime);
             if (elapsedTime < duration) {
                 requestAnimationFrame(animateScroll);
             } else {
-                console.log('?');
+                console.log('!');
-                systemScrolling = false;
+                setTimeout(() => {
+                    console.log('?');
+                    systemScrolling = false;
+                }, 100);
             }
         }
 
@@ -54,7 +58,7 @@
             return a * Math.pow(t, 3) + b * Math.pow(t, 2) + c * t;
         }
 
-        return cubicBezier(progress, p1x, p2x);
+        return BezierEasing(p1x, p1y, p2x, p2y)(progress);
     }
 
     function getClass(lyricIndex: number, progress: number) {
@@ -80,8 +84,12 @@
                     found = true;
                     const currentRef = refs[i];
                     if (currentRef && currentScrollPos !== currentLyric.text) {
-                        const targetScroll = lyricsContainer.scrollTop + currentRef.getBoundingClientRect().top - 320;
+                        const targetScroll =
-                        const duration = 700;
+                            lyricsContainer.scrollTop +
+                            currentRef.getBoundingClientRect().top -
+                            lyricsContainer.getBoundingClientRect().height * 0.1 -
+                            128;
+                        const duration = 450;
                         smoothScrollTo(lyricsContainer, targetScroll, duration, customBezier);
                         lastScroll = 0;
                         currentScrollPos = currentLyric.text;
@@ -186,7 +194,7 @@
         line-height: 2.7rem;
         top: 1rem;
         transition: 0.2s;
-        margin: 1rem 0.3rem;
+        margin: 1rem 0rem;
     }
     .previous-lyric {
         position: relative;

src/routes/+page.svelte

@@ -77,7 +77,7 @@
         </ul>
     </div>
     <p>
-        AquaVox 1.9.0 · 早期公开预览 · 源代码参见
+        AquaVox 1.9.1 · 早期公开预览 · 源代码参见
         <a href="https://github.com/alikia2x/aquavox">GitHub</a>
     </p>
     <a href="/import">导入音乐</a> <br />