Skip to content

Commit

Permalink
core: 修改歌词动画
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eplorr
Eplorr committed May 12, 2024
1 parent e59b651 commit 3c33688
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 46 deletions.
11 changes: 5 additions & 6 deletions packages/bncm/src/lyric/provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,7 @@ async function getLyric(
signal?: AbortSignal,
): Promise<EAPILyricResponse> {
const v = await fetch(
`${
window?.APP_CONF?.domain ?? "https://music.163.com"
`${window?.APP_CONF?.domain ?? "https://music.163.com"
}/api/song/lyric/v1?tv=0&lv=0&rv=0&kv=0&yv=0&ytv=0&yrv=0&cp=false&id=${songId}`,
{
signal,
Expand Down Expand Up @@ -121,7 +120,7 @@ function pairLyric(line: LyricLine, lines: CoreLyricLine[], key: TransLine) {
} else if (
nearestLine &&
Math.abs(nearestLine.startTime - line.words[0].startTime) <
Math.abs(coreLine.startTime - line.words[0].startTime)
Math.abs(coreLine.startTime - line.words[0].startTime)
) {
nearestLine = coreLine;
} else if (nearestLine === undefined) {
Expand Down Expand Up @@ -384,7 +383,7 @@ async function getLyricFromNCM(
};
}

class LyricNotExistError extends Error {}
class LyricNotExistError extends Error { }

const rawLyricLinesAtom = atom({
state: "loading",
Expand Down Expand Up @@ -485,10 +484,10 @@ export const lyricLinesAtom = atom(
for (const line of overrideLines) {
if (line.words.length > 0) {
const delta = Math.abs(
Math.max(0, line.startTime - 500) - line.startTime,
Math.max(0, line.startTime - 300) - line.startTime,
);
line.startTime -= delta;
line.endTime -= 500;
line.endTime -= 300;
}
}
}
Expand Down
18 changes: 9 additions & 9 deletions packages/core/src/bg-render/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export abstract class AbstractBaseRenderer implements Disposable, HasElement {

export abstract class BaseRenderer extends AbstractBaseRenderer {
private observer: ResizeObserver;
protected flowSpeed = 8;
protected flowSpeed = 4;
protected currerntRenderScale = 0.75;
constructor(protected canvas: HTMLCanvasElement) {
super();
Expand All @@ -78,8 +78,8 @@ export abstract class BaseRenderer extends AbstractBaseRenderer {
const height = Math.max(
1,
canvas.clientHeight *
window.devicePixelRatio *
this.currerntRenderScale,
window.devicePixelRatio *
this.currerntRenderScale,
);
this.onResize(width, height);
});
Expand All @@ -89,11 +89,11 @@ export abstract class BaseRenderer extends AbstractBaseRenderer {
this.currerntRenderScale = scale;
this.onResize(
this.canvas.clientWidth *
window.devicePixelRatio *
this.currerntRenderScale,
window.devicePixelRatio *
this.currerntRenderScale,
this.canvas.clientHeight *
window.devicePixelRatio *
this.currerntRenderScale,
window.devicePixelRatio *
this.currerntRenderScale,
);
}
/**
Expand All @@ -108,8 +108,8 @@ export abstract class BaseRenderer extends AbstractBaseRenderer {
this.canvas.height = height;
}
/**
* 修改背景的流动速度，数字越大越快，默认为 8
* @param speed 背景的流动速度，默认为 8
* 修改背景的流动速度，数字越大越快，默认为 4
* @param speed 背景的流动速度，默认为 4
*/
setFlowSpeed(speed: number) {
this.flowSpeed = speed;
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/lyric-player/bottom-line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export class BottomLineEl implements HasElement, Disposable {
let style = `transform:translate(${this.lineTransforms.posX
.getCurrentPosition()
.toFixed(2)}px,${this.lineTransforms.posY
.getCurrentPosition()
.toFixed(2)}px);`;
.getCurrentPosition()
.toFixed(2)}px);`;
if (!this.lyricPlayer.getEnableSpring() && this.isInSight) {
style += `transition-delay:${this.delay}ms;`;
}
Expand Down
15 changes: 8 additions & 7 deletions packages/core/src/lyric-player/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
stiffness: 100,
};
private posYSpringParams: Partial<SpringParams> = {
mass: 0.8,
mass: 0.7,
damping: 15,
stiffness: 100,
};
Expand Down Expand Up @@ -222,7 +222,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
// margin: "0 -1em",
contain: "content",
willChange: "filter,transform,opacity",
transition: "filter 0.5s, background-color 0.25s, box-shadow 0.25s",
transition: "filter 0.2s ease, background-color 0.25s, box-shadow 0.25s",
boxSizing: "content-box",
borderRadius: "16px",
"&:has(>*):hover": {
Expand Down Expand Up @@ -623,6 +623,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
...line,
};
});
this.isNonDynamic = true;
this.isNonDuet = true;
for (const line of this.processedLines) {
if (line.words.length > 1) {
Expand Down Expand Up @@ -691,7 +692,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
this.setLinePosYSpringParams({});
this.setLineScaleSpringParams({});
this.resetScroll();
this.setCurrentTime(initialTime, true);
this.setCurrentTime(0, true);
this.calcLayout(true, true);
console.log("设置歌词行，触发强制重排", initialTime);
}
Expand Down Expand Up @@ -752,7 +753,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
} else {
this.interludeDots.setInterlude(undefined);
}
const SCALE_ASPECT = this.enableScale ? 0.98 : 1;
const SCALE_ASPECT = this.enableScale ? 0.97 : 1;
const scrollOffset = this.lyricLinesEl
.slice(0, targetAlignIndex)
.reduce(
Expand Down Expand Up @@ -828,7 +829,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
} else {
blurLevel = 1;
if (i < this.scrollToIndex) {
blurLevel += Math.abs(this.scrollToIndex - i) / 2 + 1;
blurLevel += Math.abs(this.scrollToIndex - i) + 1;
} else {
blurLevel += Math.abs(
i - Math.max(this.scrollToIndex, latestIndex),
Expand Down Expand Up @@ -859,7 +860,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
if (curPos >= 0 && !(this.isSeeking || this.initializeSeeking)) {
delay += baseDelay;
if (i >= this.scrollToIndex) baseDelay *= 1.2;
baseDelay = Math.min(baseDelay, 0.05);
baseDelay = Math.min(baseDelay, 0.045);

// delay += 0.05;

Expand All @@ -869,7 +870,7 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
});
this.scrollBoundary[1] = curPos + this.scrollOffset - this.size[1] / 2;
// console.groupEnd();
this.bottomLine.setTransform(20, curPos, force, delay);
this.bottomLine.setTransform(24, curPos, force, delay);
}
/**
* 获取当前歌词的播放位置
Expand Down
40 changes: 18 additions & 22 deletions packages/core/src/lyric-player/lyric-line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ function generateFadeGradient(
const widthInTotal = width / totalAspect;
const leftPos = (1 - widthInTotal) / 2;
return [
`linear-gradient(to right,${bright} ${leftPos * 100}%,${dark} ${
(leftPos + widthInTotal) * 100
`linear-gradient(to right,${bright} ${leftPos * 100}%,${dark} ${(leftPos + widthInTotal) * 100
}%)`,
totalAspect,
];
Expand Down Expand Up @@ -183,8 +182,8 @@ export class RawLyricLineMouseEvent extends MouseEvent {

type MouseEventMap = {
[evt in keyof HTMLElementEventMap]: HTMLElementEventMap[evt] extends MouseEvent
? evt
: never;
? evt
: never;
};
type MouseEventTypes = MouseEventMap[keyof MouseEventMap];
type MouseEventListener = (
Expand Down Expand Up @@ -526,10 +525,10 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
style += `transform:translate(${this.lineTransforms.posX
.getCurrentPosition()
.toFixed(1)}px,${this.lineTransforms.posY
.getCurrentPosition()
.toFixed(1)}px) scale(${this.lineTransforms.scale
.getCurrentPosition()
.toFixed(4)});`;
.getCurrentPosition()
.toFixed(1)}px) scale(${this.lineTransforms.scale
.getCurrentPosition()
.toFixed(4)});`;
if (!this.lyricPlayer.getEnableSpring() && this.isInSight) {
style += `transition-delay:${this.delay}ms;`;
}
Expand Down Expand Up @@ -628,11 +627,12 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
),
);
}

if (merged.word.trimStart() !== merged.word) {
main.appendChild(document.createTextNode(" "));
}
main.appendChild(wrapperWordEl);
if (merged.word.trimEnd() !== merged.word) {
if (merged.word.trimEnd() !== merged.word && shouldEmphasize(merged)) {
main.appendChild(document.createTextNode(" "));
}
} else if (chunk.word.trim().length === 0) {
Expand Down Expand Up @@ -787,9 +787,8 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {

return {
offset: x,
transform: `${matrix4ToCSS(mat, 4)} translate(${
-transX * 0.05 * amount * ((arr.length - i) / arr.length) ** 2
}em, ${-transX * 0.03 * amount}em)`,
transform: `${matrix4ToCSS(mat, 4)} translate(${-transX * 0.05 * amount * ((arr.length - i) / arr.length) ** 2
}em, ${-transX * 0.03 * amount}em)`,
textShadow: `0 0 ${Math.min(
0.3,
blur * 0.4,
Expand Down Expand Up @@ -849,7 +848,7 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
private get totalDuration() {
return (
this.lyricLine.endTime +
(this.lyricAdvanceDynamicLyricTime ? 500 : 0) -
(this.lyricAdvanceDynamicLyricTime ? 300 : 0) -
this.lyricLine.startTime
);
}
Expand Down Expand Up @@ -909,11 +908,9 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
wordEl.style.webkitMaskSize = totalAspectStr;
}
const w = word.width + fadeWidth;
const maskPos = `clamp(${-w}px,calc(${-w}px + (var(--amll-player-time) - ${
word.startTime
})*${
w / Math.abs(word.endTime - word.startTime)
}px),0px) 0px, left top`;
const maskPos = `clamp(${-w}px,calc(${-w}px + (var(--amll-player-time) - ${word.startTime
})*${w / Math.abs(word.endTime - word.startTime)
}px),0px) 0px, left top`;
wordEl.style.maskPosition = maskPos;
wordEl.style.webkitMaskPosition = maskPos;
}
Expand Down Expand Up @@ -1045,7 +1042,7 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
delay = 0,
currentAbove = true,
) {
const roundedBlur = Math.round(blur);
const roundedBlur = blur.toFixed(3);
const beforeInSight = this.isInSight;
const enableSpring = this.lyricPlayer.getEnableSpring();
this.left = left;
Expand All @@ -1055,10 +1052,9 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
const main = this.element.children[0] as HTMLDivElement;
const trans = this.element.children[1] as HTMLDivElement;
const roman = this.element.children[2] as HTMLDivElement;
main.style.opacity = `${
opacity *
main.style.opacity = `${opacity *
(!this.hasFaded ? 1 : this.lyricPlayer._getIsNonDynamic() ? 1 : 0.3)
}`;
}`;
trans.style.opacity = `${opacity / 2}`;
roman.style.opacity = `${opacity / 2}`;
if (force || !enableSpring) {
Expand Down

0 comments on commit 3c33688

Please sign in to comment.