@rxdrag/website-lib-core 0.0.103 → 0.0.104

package/src/motion/consts.ts

@@ -1,428 +0,0 @@
-import {
-  AnchorOffsets,
-  AosAnimationConfig,
-  OpenableAnimationConfig,
-  AnimationConfig,
-} from "./types";
-
-//立即执行
-export const DATA_MOTION = "data-motion";
-
-//过渡
-//export const DATA_MOTION_TRANSITION = "data-motion-transition";
-//悬停
-export const DATA_MOTION_HOVER = "data-motion-hover";
-//按压
-export const DATA_MOTION_TAP = "data-motion-tap";
-//入视图
-export const DATA_MOTION_INVIEW = "data-motion-inview";
-//弹层动画，有动作的组件联动
-export const DATA_MOTION_OPENABLE = "data-motion-openable";
-//数字动画
-export const DATA_MOTION_NUMBER = "data-motion-number";
-export const DATA_MOTION_NUMBER_ONCE = "data-motion-number-once";
-
-export type PresetAnimations =
-  | "fade"
-  | "fade-up"
-  | "fade-down"
-  | "fade-left"
-  | "fade-right"
-  | "fade-up-right"
-  | "fade-up-left"
-  | "fade-down-right"
-  | "fade-down-left"
-  | "flip-up"
-  | "flip-down"
-  | "flip-left"
-  | "flip-right"
-  | "slide-up"
-  | "slide-down"
-  | "slide-left"
-  | "slide-right"
-  | "rotate"
-  | "rotate-scale"
-  | "rotate-scale-up"
-  | "rotate-scale-down"
-  | "rotate-scale-left"
-  | "rotate-scale-right"
-  | "rotate-scale-up-right"
-  | "rotate-scale-up-left"
-  | "rotate-scale-down-right"
-  | "rotate-scale-down-left"
-  | "zoom-in"
-  | "zoom-in-up"
-  | "zoom-in-down"
-  | "zoom-in-left"
-  | "zoom-in-right"
-  | "zoom-out"
-  | "zoom-out-up"
-  | "zoom-out-down"
-  | "zoom-out-left"
-  | "zoom-out-right";
-
-// Anchor placements
-export const ANCHOR_PLACEMENTS: AnchorOffsets = {
-  "top-bottom": { element: 0, viewport: 100 },
-  "top-center": { element: 0, viewport: 50 },
-  "top-top": { element: 0, viewport: 0 },
-  "center-bottom": { element: 50, viewport: 100 },
-  "center-center": { element: 50, viewport: 50 },
-  "center-top": { element: 50, viewport: 0 },
-  "bottom-bottom": { element: 100, viewport: 100 },
-  "bottom-center": { element: 100, viewport: 50 },
-  "bottom-top": { element: 100, viewport: 0 },
-} as const;
-
-export const ANIMATIONS: Record<string, AnimationConfig | undefined> = {
-  // Fade动画
-  fade: {
-    from: {
-      opacity: 0,
-      scale: 0.8,
-    },
-    duration: 1,
-    ease: "back.out(1.7)",
-  },
-  "fade-up": {
-    from: {
-      opacity: 0,
-      y: 160,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-  "fade-down": {
-    from: {
-      opacity: 0,
-      y: -160,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-  "fade-left": {
-    from: {
-      opacity: 0,
-      x: -160,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-  "fade-right": {
-    from: {
-      opacity: 0,
-      x: 160,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-
-  // Flip动画
-  flip: {
-    from: {
-      opacity: 0,
-      rotationY: 90,
-      transformPerspective: 1000,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-  "flip-x": {
-    from: {
-      opacity: 0,
-      rotationX: 90,
-      transformPerspective: 1000,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-
-  // Zoom动画
-  "zoom-in": {
-    from: {
-      opacity: 0,
-      scale: 0.6,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-  "zoom-out": {
-    from: {
-      opacity: 0,
-      scale: 1.2,
-    },
-    duration: 1.0,
-    ease: "power3.out",
-  },
-
-  // 特殊效果
-  rotate: {
-    from: {
-      opacity: 0,
-      rotation: -90,
-    },
-    duration: 1.4,
-    ease: "back.out(1.4)",
-  },
-  "rotate-scale": {
-    from: {
-      opacity: 0,
-      rotation: -90,
-      scale: 0.85,
-    },
-    duration: 1.4,
-    ease: "back.out(1.4)",
-  },
-};
-
-export const AOS_ANIMATIONS: Record<string, AosAnimationConfig | undefined> = {
-  // Fade动画
-  fade: {
-    enter: {
-      from: { opacity: 0, scale: 0.8 },
-      duration: 1,
-      ease: "back.out(1.7)",
-    },
-    exit: {
-      to: { opacity: 0, scale: 0.8 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    once: true,
-  },
-  "fade-up": {
-    enter: {
-      from: { opacity: 0, y: 160 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, y: 160 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.2,
-    once: true,
-  },
-  "fade-down": {
-    enter: {
-      from: { opacity: 0, y: -160 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, y: -160 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.2,
-    once: true,
-  },
-  "fade-left": {
-    enter: {
-      from: { opacity: 0, x: -160 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, x: -160 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.2,
-    once: true,
-  },
-  "fade-right": {
-    enter: {
-      from: { opacity: 0, x: 160 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, x: 160 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.2,
-    once: true,
-  },
-
-  // Flip动画
-  flip: {
-    enter: {
-      from: { opacity: 0, rotationY: 90, transformPerspective: 1000 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, rotationY: 90, transformPerspective: 1000 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.1,
-    once: true,
-  },
-  "flip-x": {
-    enter: {
-      from: { opacity: 0, rotationX: 90, transformPerspective: 1000 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, rotationX: 90, transformPerspective: 1000 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.1,
-    once: true,
-  },
-
-  // Zoom动画
-  "zoom-in": {
-    enter: {
-      from: { opacity: 0, scale: 0.6 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, scale: 0.6 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.2,
-    once: true,
-  },
-  "zoom-out": {
-    enter: {
-      from: { opacity: 0, scale: 1.2 },
-      duration: 1.0,
-      ease: "power3.out",
-    },
-    exit: {
-      to: { opacity: 0, scale: 1.2 },
-      duration: 0.8,
-      ease: "power3.in",
-    },
-    threshold: 0.2,
-    once: true,
-  },
-
-  // 特殊效果
-  rotate: {
-    enter: {
-      from: { opacity: 0, rotation: -90 },
-      duration: 1.4,
-      ease: "back.out(1.4)",
-    },
-    exit: {
-      to: { opacity: 0, rotation: 90 },
-      duration: 1.0,
-      ease: "power3.in",
-    },
-    threshold: 0.1,
-    once: true,
-  },
-  "rotate-scale": {
-    enter: {
-      from: { opacity: 0, rotation: -90, scale: 0.85 },
-      duration: 1.4,
-      ease: "back.out(1.4)",
-    },
-    exit: {
-      to: { opacity: 0, rotation: 90, scale: 0.85 },
-      duration: 1.0,
-      ease: "power3.in",
-    },
-    threshold: 0.1,
-    once: true,
-  },
-};
-
-export const POPUP_ANIMATIONS: Record<
-  string,
-  OpenableAnimationConfig | undefined
-> = {
-  // 缩放效果
-  scale: {
-    open: {
-      from: { opacity: 0, scale: 0.5 },
-      duration: 0.4,
-      ease: "back.out(1.7)",
-    },
-    close: {
-      to: { opacity: 0, scale: 0.5 },
-      duration: 0.3,
-      ease: "power3.in",
-    },
-  },
-
-  // 淡入淡出
-  fade: {
-    open: {
-      from: { opacity: 0 },
-      duration: 0.3,
-      ease: "power2.out",
-    },
-    close: {
-      to: { opacity: 0 },
-      duration: 0.2,
-      ease: "power2.in",
-    },
-  },
-
-  // 从上方滑入
-  "slide-down": {
-    open: {
-      from: { opacity: 0, y: -50, scale: 0.98 },
-      duration: 0.4,
-      ease: "power3.out",
-    },
-    close: {
-      to: { opacity: 0, y: -50, scale: 0.98 },
-      duration: 0.3,
-      ease: "power2.in",
-    },
-  },
-
-  // 从下方滑入
-  "slide-up": {
-    open: {
-      from: { opacity: 0, y: 50, scale: 0.98 },
-      duration: 0.4,
-      ease: "power3.out",
-    },
-    close: {
-      to: { opacity: 0, y: 50, scale: 0.98 },
-      duration: 0.3,
-      ease: "power2.in",
-    },
-  },
-
-  // 从右侧滑入
-  "slide-left": {
-    open: {
-      from: { opacity: 0, x: 100 },
-      duration: 0.4,
-      ease: "power3.out",
-    },
-    close: {
-      to: { opacity: 0, x: 100 },
-      duration: 0.3,
-      ease: "power2.in",
-    },
-  },
-
-  // 从左侧滑入
-  "slide-right": {
-    open: {
-      from: { opacity: 0, x: -100 },
-      duration: 0.4,
-      ease: "power3.out",
-    },
-    close: {
-      to: { opacity: 0, x: -100 },
-      duration: 0.3,
-      ease: "power2.in",
-    },
-  },
-};

package/src/motion/convertToGsapVars.ts

@@ -1,102 +0,0 @@
-import { AnimationConfig, EaseConfig, EaseString } from "./types";
-import { gsap } from "gsap/dist/gsap";
-
-/**
- * 将AnimationConfig转换为GSAP兼容的TweenVars
- * @param animation 动画配置
- * @returns GSAP兼容的动画配置
- */
-export function convertToGsapVars(animation: AnimationConfig): gsap.TweenVars {
-  // 创建基础TweenVars对象
-  const gsapVars: gsap.TweenVars = {};
-
-  // 如果传入的是直接包含属性的对象（如initial），直接使用其中的属性
-  if (
-    typeof animation === "object" &&
-    !animation.to &&
-    !animation.from &&
-    !animation.fromTo
-  ) {
-    // 检查是否有initial属性
-    if (animation.initial) {
-      // initial属性是TweenVars类型，可以直接使用
-      Object.assign(gsapVars, animation.initial);
-    } else {
-      // 复制除了控制参数外的所有属性
-      // 这里使用安全的类型方式处理
-      const copyProps = (obj: Record<string, unknown>) => {
-        Object.keys(obj).forEach((key) => {
-          // 跳过动画控制参数
-          if (
-            key !== "duration" &&
-            key !== "delay" &&
-            key !== "ease" &&
-            key !== "preset"
-          ) {
-            gsapVars[key] = obj[key];
-          }
-        });
-      };
-
-      copyProps(animation as Record<string, unknown>);
-    }
-  } else {
-    // 标准动画配置处理
-    // 复制所有属性
-    if (animation.to) {
-      Object.assign(gsapVars, animation.to);
-    }
-
-    if (animation.from) {
-      Object.assign(gsapVars, animation.from);
-    }
-
-    if (animation.fromTo) {
-      Object.assign(gsapVars, animation.fromTo.to);
-    }
-  }
-
-  // 复制动画控制参数
-  if (animation.duration) gsapVars.duration = animation.duration;
-  if (animation.delay) gsapVars.delay = animation.delay;
-
-  // 处理ease属性
-  if (animation.ease) {
-    if (typeof animation.ease === "string") {
-      // 字符串直接使用
-      gsapVars.ease = animation.ease as EaseString;
-    } else if (typeof animation.ease === "function") {
-      // 如果是函数，直接使用
-      gsapVars.ease = animation.ease;
-    } else if (typeof animation.ease === "object" && "type" in animation.ease) {
-      // 处理EaseConfig对象
-      const easeConfig = animation.ease as EaseConfig;
-      if (easeConfig.type) {
-        // 将EaseConfig转换为字符串
-        let easeStr = easeConfig.type;
-
-        // 添加方向后缀，如.out
-        easeStr += ".out";
-
-        // 添加参数
-        if (easeConfig.config) {
-          const params = [];
-          if (easeConfig.config.overshoot !== undefined)
-            params.push(easeConfig.config.overshoot);
-          if (easeConfig.config.amplitude !== undefined)
-            params.push(easeConfig.config.amplitude);
-          if (easeConfig.config.period !== undefined)
-            params.push(easeConfig.config.period);
-
-          if (params.length > 0) {
-            easeStr += `(${params.join(",")})`;
-          }
-        }
-
-        gsapVars.ease = easeStr;
-      }
-    }
-  }
-
-  return gsapVars;
-}

package/src/motion/index.ts

@@ -1,6 +0,0 @@
-export * from "./consts";
-export * from "./types";
-export * from "./normalizeAnimation";
-export * from "./normalizeAosAnimation";
-export * from "./normalizePopupAnimation";
-export * from "./convertToGsapVars";

package/src/motion/normalizeAnimation.ts

@@ -1,28 +0,0 @@
-import { ANIMATIONS } from "./consts";
-import { AnimationConfig } from "./types";
-import { merge } from "lodash-es";
-
-/**
- * 标准化动画配置，把预置动画补全
- * @param motion 动画配置
- * @param isDual 是否为双态动画
- * @returns 标准化后的动画配置
- */
-export function normalizeAnimation(motion?: AnimationConfig | string) {
-  let presetKey: string | undefined;
-  let normalMotion: AnimationConfig | undefined;
-  if (typeof motion === "string") {
-    presetKey = motion;
-  } else {
-    presetKey = motion?.preset;
-    normalMotion = motion;
-  }
-
-  if (presetKey) {
-    const presetMotion = ANIMATIONS[presetKey];
-    if (presetMotion) {
-      return merge(presetMotion, normalMotion);
-    }
-  }
-  return normalMotion;
-}

package/src/motion/normalizeAosAnimation.ts

@@ -1,22 +0,0 @@
-import { merge } from "lodash-es";
-import { AOS_ANIMATIONS } from "./consts";
-import { AnimationConfig, AosAnimationConfig } from "./types";
-
-export function normalizeAosAnimation(motion?: AosAnimationConfig | string) {
-  let presetKey: string | undefined;
-  let normalMotion: AnimationConfig | undefined;
-  if (typeof motion === "string") {
-    presetKey = motion;
-  } else {
-    presetKey = motion?.preset;
-    normalMotion = motion;
-  }
-
-  if (presetKey) {
-    const presetMotion = AOS_ANIMATIONS[presetKey];
-    if (presetMotion) {
-      return merge(presetMotion, normalMotion);
-    }
-  }
-  return normalMotion;
-}

package/src/motion/normalizePopupAnimation.ts

@@ -1,24 +0,0 @@
-import { merge } from "lodash-es";
-import { OpenableAnimationConfig } from "./types";
-import { POPUP_ANIMATIONS } from "./consts";
-
-export function normalizePopupAnimation(
-  motion?: OpenableAnimationConfig | string
-) {
-  let presetKey: string | undefined;
-  let normalMotion: OpenableAnimationConfig | undefined;
-  if (typeof motion === "string") {
-    presetKey = motion;
-  } else {
-    presetKey = motion?.preset;
-    normalMotion = motion;
-  }
-
-  if (presetKey) {
-    const presetMotion = POPUP_ANIMATIONS[presetKey];
-    if (presetMotion) {
-      return merge(presetMotion, normalMotion);
-    }
-  }
-  return normalMotion;
-}