48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
/*
|
||
* @file: /src/ui/function.ts
|
||
* @description: 缓动函数之类的，与框架无关，只做计算
|
||
* @author: tsl (randy1924@163.com)
|
||
* @date: 2026-03-19 11:50:59
|
||
* @lastModified: 2026-03-19 15:51:48
|
||
* @lastModifiedBy: tsl (randy1924@163.com)
|
||
*/
|
||
import { easeOutSine } from "js-easing-functions";
|
||
|
||
/**
|
||
* 缓慢滚动到结束值（使用缓动函数）
|
||
* @param start 滚动开始值，px
|
||
* @param end 滚动结束值，px
|
||
* @param duration 完成动画所需的时间，ms
|
||
* @param cb 回调函数，参数为当前值，px
|
||
*/
|
||
export async function slowlyScroll(
|
||
start: number,
|
||
end: number,
|
||
duration: number,
|
||
cb?: (value: number) => void,
|
||
): Promise<void> {
|
||
return new Promise<void>((resolve) => {
|
||
const startTime = Date.now();
|
||
const distance = end - start;
|
||
|
||
const intervalId = setInterval(() => {
|
||
const currentTime = Date.now();
|
||
const elapsed = currentTime - startTime;
|
||
|
||
// 使用 easeOutSine 缓动函数
|
||
// 参数：已过去时间、初始值、改变量、总持续时间
|
||
const currentValue = easeOutSine(elapsed, start, distance, duration);
|
||
|
||
cb?.(currentValue);
|
||
|
||
if (elapsed >= duration) {
|
||
// 清除定时器
|
||
clearInterval(intervalId);
|
||
// 确保最后一次调用使用准确的结束值
|
||
cb?.(end);
|
||
resolve();
|
||
}
|
||
}, 16); // 约60fps
|
||
});
|
||
}
|