alikia2x/aquavox
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

improve: fine-tuning parameters of lyrics

Browse Source
This commit is contained in:
alikia2x (寒寒) 2024-10-25 01:07:31 +08:00
parent 57fd2f626b
commit 93e13f9668
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
2 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/lyrics/lyricLine.svelte
View File

@ -5,7 +5,6 @@
import type { Spring } from '$lib/graphics/spring/spring'; import type { Spring } from '$lib/graphics/spring/spring';
const viewportWidth = document.documentElement.clientWidth; const viewportWidth = document.documentElement.clientWidth;
const scaleCurrentLine = viewportWidth > 640 ? 1.02 : 1.045;
export let line: ScriptItem; export let line: ScriptItem;
export let index: number; export let index: number;
@ -18,7 +17,6 @@
let time = 0; let time = 0;
let positionX: number = 0; let positionX: number = 0;
let positionY: number = 0; let positionY: number = 0;
let scale = 1;
let opacity = 1; let opacity = 1;
let stopped = false; let stopped = false;
let lastPosX: number | undefined = undefined; let lastPosX: number | undefined = undefined;
@ -76,7 +74,6 @@
export const setCurrent = (isCurrent: boolean) => { export const setCurrent = (isCurrent: boolean) => {
isCurrentLyric = isCurrent; isCurrentLyric = isCurrent;
opacity = isCurrent ? 1 : 0.36; opacity = isCurrent ? 1 : 0.36;
scale = isCurrent ? scaleCurrentLine : 1;
}; };
export const setBlur = (blur: number) => { export const setBlur = (blur: number) => {
@ -112,8 +109,8 @@
lastPosY = pos.y; lastPosY = pos.y;
positionX = pos.x; positionX = pos.x;
positionY = pos.y; positionY = pos.y;
springX = createSpring(pos.x, pos.x, 0.1, 0.67); springX = createSpring(pos.x, pos.x, 0.114, 0.72);
springY = createSpring(pos.y, pos.y, 0.1, 0.67); springY = createSpring(pos.y, pos.y, 0.114, 0.72);
}; };
export const stop = () => { export const stop = () => {
@ -126,8 +123,8 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
style="transform: translate3d({positionX}px, {positionY}px, 0); scale: {scale}; style="transform: translate3d({positionX}px, {positionY}px, 0); transition-property: opacity, text-shadow;
transition-property: scale, opacity, text-shadow; transition-duration: 0.5s; transition-timing-function: ease-in-out; opacity: {opacity}; transition-duration: 0.36s; transition-timing-function: ease-out; opacity: {opacity};
transform-origin: center left;" transform-origin: center left;"
class="absolute z-50 w-full pr-12 lg:pr-16 cursor-default py-5" class="absolute z-50 w-full pr-12 lg:pr-16 cursor-default py-5"
bind:this={ref} bind:this={ref}

10
src/lib/components/lyrics/newLyrics.svelte
View File

@ -77,10 +77,14 @@
for (let i = 0; i < lyricElements.length; i++) { for (let i = 0; i < lyricElements.length; i++) {
const currentLyricComponent = lyricComponents[i]; const currentLyricComponent = lyricComponents[i];
let delay = 0; let delay = 0;
if (i <= currentLyricIndex) { if (i < currentLyricIndex) {
delay = 0; delay = 0;
} else { }
delay = Math.min(Math.min(currentLyricDuration, 0.6), 0.064 * (i - currentLyricIndex)); else if (i == currentLyricIndex) {
delay = 0.042;
}
else {
delay = Math.min(Math.min(currentLyricDuration, 0.6), 0.067 * (i - currentLyricIndex+1.2));
} }
const offset = Math.abs(i - currentLyricIndex); const offset = Math.abs(i - currentLyricIndex);
let blurRadius = Math.min(offset * blurRatio, 16); let blurRadius = Math.min(offset * blurRatio, 16);