diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts index c8ad103065..fdbf9ef780 100644 --- a/src/runtime/animate/index.ts +++ b/src/runtime/animate/index.ts @@ -1,46 +1,43 @@ import { cubicOut } from '../easing'; import { is_function } from '../internal'; - -// todo: same as Transition, should it be shared? -export interface AnimationConfig { - delay?: number; - duration?: number; - easing?: (t: number) => number; - css?: (t: number, u: number) => string; - tick?: (t: number, u: number) => void; -} - -export interface FlipParams { - delay?: number; - duration?: number | ((len: number) => number); - easing?: (t: number) => number; +/** @param {Element} node + * @param {{ from: DOMRect; to: DOMRect }} + * @param {FlipParams} params + * @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").AnimationConfig} + */ +export function flip(node, { from, to }, params = {}) { + const style = getComputedStyle(node); + const transform = style.transform === 'none' ? '' : style.transform; + const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat); + const dx = from.left + (from.width * ox) / to.width - (to.left + ox); + const dy = from.top + (from.height * oy) / to.height - (to.top + oy); + const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params; + return { + delay, + duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration, + easing, + css: (t, u) => { + const x = u * dx; + const y = u * dy; + const sx = t + (u * from.width) / to.width; + const sy = t + (u * from.height) / to.height; + return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`; + } + }; } -export function flip( - node: Element, - { from, to }: { from: DOMRect; to: DOMRect }, - params: FlipParams = {} -): AnimationConfig { - const style = getComputedStyle(node); - const transform = style.transform === 'none' ? '' : style.transform; - const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat); - const dx = from.left + (from.width * ox) / to.width - (to.left + ox); - const dy = from.top + (from.height * oy) / to.height - (to.top + oy); - const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params; - return { - delay, - duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration, - easing, - css: (t, u) => { - const x = u * dx; - const y = u * dy; - const sx = t + (u * from.width) / to.width; - const sy = t + (u * from.height) / to.height; - - return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`; - } - }; -} +/** @typedef {Object} AnimationConfig + * @property {number} [delay] + * @property {number} [duration] + * @property {(t:number)=>number} [easing] + * @property {(t:number,u:number)=>string} [css] + * @property {(t:number,u:number)=>void} [tick] + */ +/** @typedef {Object} FlipParams + * @property {number} [delay] + * @property {number|((len:number)=>number)} [duration] + * @property {(t:number)=>number} [easing] + */ \ No newline at end of file