317c7c5c92
- `src/types/area.ts`: cubic easing 함수 타입 추가 - `package.json`: 버전 1.1.0에서 1.2.0으로 업데이트 - `src/engine/AnimationLoop.ts`: 왕복 모션 로직을 sin 함수 기반으로 개선하여 자연스러운 좌우/상하 왕복 구현 - `src/utils/easing.ts`: easeInCubic, easeOutCubic 함수 추가
34 lines
887 B
TypeScript
34 lines
887 B
TypeScript
import { type EasingFunction } from '../types';
|
|
|
|
type EasingFunc = (t: number) => number;
|
|
|
|
/**
|
|
* 이징 함수 구현 맵
|
|
*/
|
|
const easingFunctions: Record<EasingFunction, EasingFunc> = {
|
|
linear: (t) => t,
|
|
|
|
easeIn: (t) => t * t,
|
|
easeOut: (t) => t * (2 - t),
|
|
easeInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
|
|
|
|
easeInQuad: (t) => t * t,
|
|
easeOutQuad: (t) => t * (2 - t),
|
|
|
|
easeInCubic: (t) => t * t * t,
|
|
easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
|
|
};
|
|
|
|
/**
|
|
* 진행도에 이징 함수를 적용
|
|
* @param progress 진행도 (0.0 - 1.0)
|
|
* @param easingType 적용할 이징 함수 타입
|
|
* @returns 이징이 적용된 진행도 (0.0 - 1.0)
|
|
*/
|
|
export const applyEasing = (
|
|
progress: number,
|
|
easingType: EasingFunction
|
|
): number => {
|
|
const clampedProgress = Math.max(0, Math.min(1, progress));
|
|
return easingFunctions[easingType](clampedProgress);
|
|
}; |