Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 16x 16x 6x 10x 5x 5x 4x 1x | /**
* It is a bell curved function that uses ease in out quadratic for css
* transition timing function for each side of the curve.
*
* @param {number} x - The current time, in the range [0, 1].
* @param {number} baseline - The baseline value to start from and return to.
* @returns the value of the transition at time x.
*/
export function easeInOutBell(x: number, baseline: number): number {
const alpha = 1 - baseline;
// prettier-ignore
if (x < 1 / 4) {
return 4 * Math.pow(2 * x, 3) * alpha + baseline;
} else if (x < 1 / 2) {
return (1 - Math.pow(-4 * x + 2, 3) / 2) * alpha + baseline;
} else if (x < 3 / 4) {
return (1 - Math.pow(4 * x - 2, 3) / 2) * alpha + baseline;
} else {
return (- 4 * Math.pow(2 * x - 2, 3)) * alpha + baseline;
}
}
/**
* A reversed bell curved function that starts from 1 and goes to baseline and
* come back to 1 again. It uses ease in out quadratic for css transition
* timing function for each side of the curve.
*
* @param {number} x - The current time, in the range [0, 1].
* @param {number} baseline - The baseline value to start from and return to.
* @returns the value of the transition at time x.
*/
export function reverseEaseInOutBell(x: number, baseline: number): number {
const y = easeInOutBell(x, baseline);
return -y + 1 + baseline;
}
export function easeInOutBellRelative(
x: number,
baseline: number,
prevOutlineWidth: number
): number {
const range = baseline - prevOutlineWidth;
if (x < 1 / 4) {
return prevOutlineWidth + 4 * Math.pow(2 * x, 3) * range;
} else if (x < 1 / 2) {
return prevOutlineWidth + (1 - Math.pow(-4 * x + 2, 3) / 2) * range;
} else if (x < 3 / 4) {
return prevOutlineWidth + (1 - Math.pow(4 * x - 2, 3) / 2) * range;
} else {
return prevOutlineWidth + -4 * Math.pow(2 * x - 2, 3) * range;
}
}
export function reverseEaseInOutBellRelative(
x: number,
baseline: number,
prevOutlineWidth: number
): number {
const y = easeInOutBellRelative(x, baseline, prevOutlineWidth);
return y;
}
|