@xwadex/fesd-next 0.1.0

package/src/fesd/methods/Easing4/Easing4.ts

@@ -0,0 +1,374 @@
+/* 2024.06.10 */
+// https://www.cnblogs.com/ZTianming/p/15390536.html
+// 函数参数说明 每个函数包含 t、b、c 和 d 四个参数 
+// t = Time - 表示动画开始以来经过的时间。通常从0开始，通过游戏循环或update函数来缓慢增加。 
+// b = Beginning value - 动画的起点，默认从0开始。
+// c = Change in value - 从起点到终点的差值。
+// d = Duration - 完成动画所需的时间。 使用示例
+
+// t = 0 - 动画从0s开始
+// b = 200 - 对象 x 坐标的起始位置为200
+// c = 300 - 对象必须向右移动 300，到500 结束
+// d = 1 - 对象用 1 秒时间来完成从 200 到 500 的移动
+export type Easing4Type =
+    | "easeLinear"
+    | "easeInQuad"
+    | "easeOutQuad"
+    | "easeInOutQuad"
+    | "easeInSine"
+    | "easeOutSine"
+    | "easeInOutSine"
+    | "easeInExpo"
+    | "easeOutExpo"
+    | "easeInOutExpo"
+    | "easeInCirc"
+    | "easeOutCirc"
+    | "easeInOutCirc"
+    | "easeInCubic"
+    | "easeOutCubic"
+    | "easeInOutCubic"
+    | "easeInQuart"
+    | "easeOutQuart"
+    | "easeInOutQuart"
+    | "easeInQuint"
+    | "easeOutQuint"
+    | "easeInOutQuint"
+    | "easeInElastic"
+    | "easeOutElastic"
+    | "easeInOutElastic"
+    | "easeInBack"
+    | "easeOutBack"
+    | "easeInOutBack"
+    | "easeInBounce"
+    | "easeOutBounce"
+    | "easeInOutBounce"
+
+export function easeLinear(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * t / d + b;
+}
+export function easeInQuad(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * (t /= d) * t + b;
+}
+export function easeOutQuad(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return -c * (t /= d) * (t - 2) + b;
+}
+export function easeInOutQuad(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+    return -c / 2 * ((--t) * (t - 2) - 1) + b;
+}
+export function easeInSine(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
+}
+export function easeOutSine(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * Math.sin(t / d * (Math.PI / 2)) + b;
+}
+export function easeInOutSine(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
+}
+export function easeInExpo(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
+}
+export function easeOutExpo(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
+}
+export function easeInOutExpo(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if (t == 0) return b;
+    if (t == d) return b + c;
+    if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
+    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
+}
+export function easeInCirc(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
+}
+export function easeOutCirc(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+}
+export function easeInOutCirc(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
+    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+}
+export function easeInCubic(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * (t /= d) * t * t + b;
+}
+export function easeOutCubic(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * ((t = t / d - 1) * t * t + 1) + b;
+}
+export function easeInOutCubic(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
+    return c / 2 * ((t -= 2) * t * t + 2) + b;
+}
+export function easeInQuart(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * (t /= d) * t * t * t + b;
+}
+export function easeOutQuart(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+}
+export function easeInOutQuart(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
+    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
+}
+export function easeInQuint(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * (t /= d) * t * t * t * t + b;
+}
+export function easeOutQuint(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+}
+export function easeInOutQuint(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
+    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+}
+export function easeInElastic(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    let s = 1.70158;
+    let p = 0;
+    let a = c;
+    if (t == 0) return b;
+    if ((t /= d) == 1) return b + c;
+    if (!p) p = d * .3;
+    if (a < Math.abs(c)) { a = c; s = p / 4; }
+    else s = p / (2 * Math.PI) * Math.asin(c / a);
+    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+}
+export function easeOutElastic(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    let s = 1.70158; let p = 0; let a = c;
+    if (t == 0) return b;
+    if ((t /= d) == 1) return b + c;
+    if (!p) p = d * .3;
+    if (a < Math.abs(c)) { a = c; s = p / 4; }
+    else s = p / (2 * Math.PI) * Math.asin(c / a);
+    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
+}
+export function easeInOutElastic(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    let s = 1.70158;
+    let p = 0;
+    let a = c;
+    if (t == 0) return b;
+    if ((t /= d / 2) == 2) return b + c;
+    if (!p) p = d * (.3 * 1.5);
+    if (a < Math.abs(c)) { a = c; s = p / 4; }
+    else s = p / (2 * Math.PI) * Math.asin(c / a); if (t < 1)
+        return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
+}
+export function easeInBack(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    let s
+    if (s == undefined) s = 1.70158;
+    return c * (t /= d) * t * ((s + 1) * t - s) + b;
+}
+export function easeOutBack(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    let s
+    if (s == undefined) s = 1.70158;
+    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+}
+export function easeInOutBack(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    let s
+    if (s == undefined) s = 1.70158;
+    if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
+    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
+}
+export function easeInBounce(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    return c - easeOutBounce(d - t, 0, c, d) + b;
+}
+export function easeOutBounce(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if ((t /= d) < (1 / 2.75)) {
+        return c * (7.5625 * t * t) + b;
+    } else if (t < (2 / 2.75)) {
+        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
+    } else if (t < (2.5 / 2.75)) {
+        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
+    } else {
+        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
+    }
+}
+export function easeInOutBounce(
+    t: number,
+    b: number,
+    c: number,
+    d: number
+) {
+    if (t < d / 2) return easeInBounce(t * 2, 0, c, d) * .5 + b;
+    return easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
+}
+
+export const Easing4 = {
+    easeLinear,
+    easeInQuad,
+    easeOutQuad,
+    easeInOutQuad,
+    easeInSine,
+    easeOutSine,
+    easeInOutSine,
+    easeInExpo,
+    easeOutExpo,
+    easeInOutExpo,
+    easeInCirc,
+    easeOutCirc,
+    easeInOutCirc,
+    easeInCubic,
+    easeOutCubic,
+    easeInOutCubic,
+    easeInQuart,
+    easeOutQuart,
+    easeInOutQuart,
+    easeInQuint,
+    easeOutQuint,
+    easeInOutQuint,
+    easeInElastic,
+    easeOutElastic,
+    easeInOutElastic,
+    easeInBack,
+    easeOutBack,
+    easeInOutBack,
+    easeInBounce,
+    easeOutBounce,
+    easeInOutBounce,
+}

package/src/fesd/methods/Easing4/index.ts

@@ -0,0 +1,2 @@
+/* 2024.05.28 */
+export * from "./Easing4"

package/src/fesd/methods/index.ts

@@ -0,0 +1 @@
+export * from "./Easing4"

package/src/fesd/tools.ts

@@ -0,0 +1,69 @@
+import { lock, unlock, clearBodyLocks } from "tua-body-scroll-lock"
+
+export const mediaRatio = (width: number, height: number) =>
+    Number(width) && Number(height)
+        ? Math.round(height / width * 10000) / 100 + "%"
+        : "100%"
+
+
+export const delay = (time: number) => new Promise<void>((resolve) => {
+    let timer = setTimeout(() => {
+        clearTimeout(timer)
+        return resolve()
+    }, time)
+})
+
+export const querySearchWord = (str: string) => str.trim().toLowerCase()
+
+export const lockBody = (
+    active: boolean,
+    stillScrollHTMLElement?: HTMLElement | HTMLElement[] | null | undefined
+): void => {
+
+    if (active) {
+        document.body.style.overflow = "visible"
+        lock(stillScrollHTMLElement)
+    } else {
+        document.body.style.overflow = ""
+        clearBodyLocks()
+    }
+}
+
+export const mergeClassName = (...argements: (string | number | boolean)[]): string =>
+    argements.toString().replace(/,/g, " ").replace(/\s+/g, " ").trim()
+
+
+export const getSearchParams = (searchParams: URLSearchParams) => {
+    const params: any = {}
+    searchParams.forEach((value: any, key: any) => { params[key] = value })
+    return params
+}
+
+export const getURLSearchParams = (searchParams: URLSearchParams) => {
+    const params: any = {}
+    searchParams.forEach((value: any, key: any) => { params[key] = value })
+    return new URLSearchParams({ ...params })
+}
+
+export const off = (event: string, callback: (e: any) => void, ref?: HTMLElement | Window & typeof globalThis,) => {
+    const element = ref ?? window
+    element.removeEventListener(event, callback)
+}
+
+export const on = (event: string, callback: (e: any) => void, ref?: HTMLElement | Window & typeof globalThis,) => {
+    const element = ref ?? window
+    element.addEventListener(event, callback)
+}
+
+export const debug = (target: string, value: any, fn: string, hook?: string,) =>
+    console.debug(`debug mode : ${hook ? hook + " > " + fn : fn} > ${target}`, value);
+
+export const query = (name: string) => document.querySelector(name)
+
+export const queryAll = (name: string) => document.querySelectorAll(name)
+
+export const isElement = (element: any | null) => element instanceof Element
+
+
+
+