@rxdrag/website-lib-core 0.0.7 → 0.0.9

package/src/motion/consts.ts

@@ -1,598 +1,428 @@
-import { AnchorOffsets, SimpleAnimation, DualAnimation } from "./types";
-
-// Easing functions
-export const EASINGS = {
-  linear: [0, 0, 1, 1],
-  ease: [0.25, 0.1, 0.25, 1],
-  easeIn: [0.42, 0, 1, 1],
-  easeOut: [0, 0, 0.58, 1],
-  easeInOut: [0.42, 0, 0.58, 1],
-  // Back
-  easeInBack: [0.36, 0, 0.66, -0.56],
-  easeOutBack: [0.34, 1.56, 0.64, 1],
-  easeInOutBack: [0.68, -0.6, 0.32, 1.6],
-  // Sine
-  easeInSine: [0.12, 0, 0.39, 0],
-  easeOutSine: [0.61, 1, 0.88, 1],
-  easeInOutSine: [0.37, 0, 0.63, 1],
-  // Quad
-  easeInQuad: [0.11, 0, 0.5, 0],
-  easeOutQuad: [0.5, 1, 0.89, 1],
-  easeInOutQuad: [0.45, 0, 0.55, 1],
-  // Cubic
-  easeInCubic: [0.32, 0, 0.67, 0],
-  easeOutCubic: [0.33, 1, 0.68, 1],
-  easeInOutCubic: [0.65, 0, 0.35, 1],
-  // Quart
-  easeInQuart: [0.5, 0, 0.75, 0],
-  easeOutQuart: [0.25, 1, 0.5, 1],
-  easeInOutQuart: [0.76, 0, 0.24, 1],
-  // 柔和的缓动函数
-  softEaseOut: [0.16, 1, 0.3, 1], // 更加柔和
-  softEaseInOut: [0.4, 0, 0.2, 1], // 后期更慢
-  gentleEaseOut: [0.1, 0.9, 0.2, 1], // 非常柔和
-  gentleBackOut: [0.2, 1.2, 0.5, 1], // 轻微弹性且柔和
-  smoothEaseOut: [0.15, 0.85, 0.15, 1], // 平滑过渡
-  ultraSmoothOut: [0.05, 0.9, 0.1, 1], // 极度平滑，后期非常慢
-  microSmoothOut: [0.03, 0.94, 0.08, 1], // 微妙平滑，几乎无感知的减速
-  silkEaseOut: [0.04, 0.88, 0.06, 0.98], // 丝绸般平滑，非常柔和的结束
-  featherEaseOut: [0.08, 0.82, 0.17, 1], // 羽毛般轻盈，特别适合小幅度动画
-  gentleSilkOut: [0.02, 0.9, 0.1, 0.99], // 极其柔和，几乎感觉不到停止
-  ultraSlowOut: [0.02, 0.9, 0.05, 0.99], // 极度缓慢的结束
-  silkSlowOut: [0.01, 0.85, 0.05, 0.95], // 丝绸般缓慢，后期极慢
-  luxurySlowOut: [0.01, 0.8, 0.03, 0.92], // 奢华缓慢，几乎静止的结束
-} as const;
-
-//立即执行
-export const DATA_MOTION_ANIMATE = "data-motion-animate";
-//过渡
-//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_SCROLL = "data-motion-scroll";
-//入视图
-export const DATA_MOTION_INVIEW = "data-motion-inview";
-//打开动画，有动作的组件联动
-export const DATA_MOTION_OPEN = "data-motion-open";
-//关闭动画，有动作的组件联动
-export const DATA_MOTION_CLOSE = "data-motion-close";
-
-export enum ANIMATION {
-  // Fade animations
-  FADE = "fade",
-  FADE_UP = "fade-up",
-  FADE_DOWN = "fade-down",
-  FADE_LEFT = "fade-left",
-  FADE_RIGHT = "fade-right",
-  FADE_UP_RIGHT = "fade-up-right",
-  FADE_UP_LEFT = "fade-up-left",
-  FADE_DOWN_RIGHT = "fade-down-right",
-  FADE_DOWN_LEFT = "fade-down-left",
-
-  // Flip animations
-  FLIP_UP = "flip-up",
-  FLIP_DOWN = "flip-down",
-  FLIP_LEFT = "flip-left",
-  FLIP_RIGHT = "flip-right",
-
-  // Slide animations
-  SLIDE_UP = "slide-up",
-  SLIDE_DOWN = "slide-down",
-  SLIDE_LEFT = "slide-left",
-  SLIDE_RIGHT = "slide-right",
-
-  // Zoom animations
-  ZOOM_IN = "zoom-in",
-  ZOOM_IN_UP = "zoom-in-up",
-  ZOOM_IN_DOWN = "zoom-in-down",
-  ZOOM_IN_LEFT = "zoom-in-left",
-  ZOOM_IN_RIGHT = "zoom-in-right",
-  ZOOM_OUT = "zoom-out",
-  ZOOM_OUT_UP = "zoom-out-up",
-  ZOOM_OUT_DOWN = "zoom-out-down",
-  ZOOM_OUT_LEFT = "zoom-out-left",
-  ZOOM_OUT_RIGHT = "zoom-out-right",
-
-  // Special effects
-  ROTATE = "rotate",
-  ROTATE_SCALE = "rotate-scale",
-}
-
-// export enum ANCHOR_PLACEMENT {
-//   TOP_BOTTOM = "top-bottom",
-//   TOP_CENTER = "top-center",
-//   TOP_TOP = "top-top",
-//   CENTER_BOTTOM = "center-bottom",
-//   CENTER_CENTER = "center-center",
-//   CENTER_TOP = "center-top",
-//   BOTTOM_BOTTOM = "bottom-bottom",
-//   BOTTOM_CENTER = "bottom-center",
-//   BOTTOM_TOP = "bottom-top",
-// }
-
-// export enum EASE {
-//   // Basic
-//   LINEAR = "linear",
-//   EASE = "ease",
-//   EASE_IN = "ease-in",
-//   EASE_OUT = "ease-out",
-//   EASE_IN_OUT = "ease-in-out",
-
-//   // Back
-//   EASE_IN_BACK = "ease-in-back",
-//   EASE_OUT_BACK = "ease-out-back",
-//   EASE_IN_OUT_BACK = "ease-in-out-back",
-
-//   // Sine
-//   EASE_IN_SINE = "ease-in-sine",
-//   EASE_OUT_SINE = "ease-out-sine",
-//   EASE_IN_OUT_SINE = "ease-in-out-sine",
-
-//   // Quad
-//   EASE_IN_QUAD = "ease-in-quad",
-//   EASE_OUT_QUAD = "ease-out-quad",
-//   EASE_IN_OUT_QUAD = "ease-in-out-quad",
-
-//   // Cubic
-//   EASE_IN_CUBIC = "ease-in-cubic",
-//   EASE_OUT_CUBIC = "ease-out-cubic",
-//   EASE_IN_OUT_CUBIC = "ease-in-out-cubic",
-
-//   // Quart
-//   EASE_IN_QUART = "ease-in-quart",
-//   EASE_OUT_QUART = "ease-out-quart",
-//   EASE_IN_OUT_QUART = "ease-in-out-quart",
-// }
-
-// 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, SimpleAnimation> = {
-  // Fade animations
-  fade: {
-    keyframes: {
-      opacity: [0, 1],
-      scale: [0.8, 1],
-    },
-    transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-  },
-  "fade-up": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translateY(35px)", "translateY(0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-  "fade-down": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translateY(-35px)", "translateY(0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-  "fade-left": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translateX(35px)", "translateX(0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-  "fade-right": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translateX(-35px)", "translateX(0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-  "fade-up-right": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translate(-35px, 35px)", "translate(0, 0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-  "fade-up-left": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translate(35px, 35px)", "translate(0, 0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-  "fade-down-right": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translate(-35px, -35px)", "translate(0, 0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-  "fade-down-left": {
-    keyframes: {
-      opacity: [0, 1],
-      transform: ["translate(35px, -35px)", "translate(0, 0)"],
-    },
-    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
-  },
-
-  // Flip animations
-  "flip-up": {
-    keyframes: {
-      transform: [
-        "perspective(2500px) rotateX(60deg)",
-        "perspective(2500px) rotateX(0)",
-      ],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
-  },
-  "flip-down": {
-    keyframes: {
-      transform: [
-        "perspective(2500px) rotateX(-60deg)",
-        "perspective(2500px) rotateX(0)",
-      ],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
-  },
-  "flip-left": {
-    keyframes: {
-      transform: [
-        "perspective(2500px) rotateY(-60deg)",
-        "perspective(2500px) rotateY(0)",
-      ],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
-  },
-  "flip-right": {
-    keyframes: {
-      transform: [
-        "perspective(2500px) rotateY(60deg)",
-        "perspective(2500px) rotateY(0)",
-      ],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
-  },
-
-  // Slide animations
-  "slide-up": {
-    keyframes: {
-      transform: ["translateY(60%)", "translateY(0)"],
-    },
-    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
-  },
-  "slide-down": {
-    keyframes: {
-      transform: ["translateY(-60%)", "translateY(0)"],
-    },
-    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
-  },
-  "slide-left": {
-    keyframes: {
-      transform: ["translateX(60%)", "translateX(0)"],
-    },
-    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
-  },
-  "slide-right": {
-    keyframes: {
-      transform: ["translateX(-60%)", "translateX(0)"],
-    },
-    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
-  },
-
-  // Zoom animations
-  "zoom-in": {
-    keyframes: {
-      transform: ["scale(0.85)", "scale(1)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-in-up": {
-    keyframes: {
-      transform: ["scale(0.85) translateY(30px)", "scale(1) translateY(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-in-down": {
-    keyframes: {
-      transform: ["scale(0.85) translateY(-30px)", "scale(1) translateY(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-in-left": {
-    keyframes: {
-      transform: ["scale(0.85) translateX(30px)", "scale(1) translateX(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-in-right": {
-    keyframes: {
-      transform: ["scale(0.85) translateX(-30px)", "scale(1) translateX(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-out": {
-    keyframes: {
-      transform: ["scale(1.15)", "scale(1)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-out-up": {
-    keyframes: {
-      transform: ["scale(1.15) translateY(30px)", "scale(1) translateY(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-out-down": {
-    keyframes: {
-      transform: ["scale(1.15) translateY(-30px)", "scale(1) translateY(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-out-left": {
-    keyframes: {
-      transform: ["scale(1.15) translateX(30px)", "scale(1) translateX(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-  "zoom-out-right": {
-    keyframes: {
-      transform: ["scale(1.15) translateX(-30px)", "scale(1) translateX(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
-  },
-
-  // Special effects
-  rotate: {
-    keyframes: {
-      transform: ["rotate(-90deg)", "rotate(0)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
-  },
-  "rotate-scale": {
-    keyframes: {
-      transform: ["rotate(-90deg) scale(0.85)", "rotate(0) scale(1)"],
-      opacity: [0, 1],
-    },
-    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
-  },
-};
-
-export const DUAL_ANIMATIONS: Record<string, DualAnimation> = {
-  // Fade animations
-  fade: {
-    in: ANIMATIONS.fade,
-    out: {
-      keyframes: {
-        opacity: [1, 0],
-        scale: [1, 0.98],
-      },
-      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-    },
-  },
-  "fade-up": {
-    in: ANIMATIONS["fade-up"],
-    out: {
-      keyframes: { opacity: [1, 0], y: [0, -35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "fade-down": {
-    in: ANIMATIONS["fade-down"],
-    out: {
-      keyframes: { opacity: [1, 0], y: [0, 35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "fade-left": {
-    in: ANIMATIONS["fade-left"],
-    out: {
-      keyframes: { opacity: [1, 0], x: [0, -35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "fade-right": {
-    in: ANIMATIONS["fade-right"],
-    out: {
-      keyframes: { opacity: [1, 0], x: [0, 35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "fade-up-right": {
-    in: ANIMATIONS["fade-up-right"],
-    out: {
-      keyframes: { opacity: [1, 0], x: [0, 35], y: [0, -35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "fade-up-left": {
-    in: ANIMATIONS["fade-up-left"],
-    out: {
-      keyframes: { opacity: [1, 0], x: [0, -35], y: [0, -35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "fade-down-right": {
-    in: ANIMATIONS["fade-down-right"],
-    out: {
-      keyframes: { opacity: [1, 0], x: [0, 35], y: [0, 35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "fade-down-left": {
-    in: ANIMATIONS["fade-down-left"],
-    out: {
-      keyframes: { opacity: [1, 0], x: [0, -35], y: [0, 35] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  // Flip animations
-  "flip-up": {
-    in: ANIMATIONS["flip-up"],
-    out: {
-      keyframes: { rotateX: [0, 60], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-    },
-  },
-  "flip-down": {
-    in: ANIMATIONS["flip-down"],
-    out: {
-      keyframes: { rotateX: [0, -60], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-    },
-  },
-  "flip-left": {
-    in: ANIMATIONS["flip-left"],
-    out: {
-      keyframes: { rotateY: [0, -60], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-    },
-  },
-  "flip-right": {
-    in: ANIMATIONS["flip-right"],
-    out: {
-      keyframes: { rotateY: [0, 60], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-    },
-  },
-  // Slide animations
-  "slide-up": {
-    in: ANIMATIONS["slide-up"],
-    out: {
-      keyframes: { y: [0, -60] },
-      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
-    },
-  },
-  "slide-down": {
-    in: ANIMATIONS["slide-down"],
-    out: {
-      keyframes: { y: [0, 60] },
-      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
-    },
-  },
-  "slide-left": {
-    in: ANIMATIONS["slide-left"],
-    out: {
-      keyframes: { x: [0, -60] },
-      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
-    },
-  },
-  "slide-right": {
-    in: ANIMATIONS["slide-right"],
-    out: {
-      keyframes: { x: [0, 60] },
-      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
-    },
-  },
-  // Zoom animations
-  "zoom-in": {
-    in: ANIMATIONS["zoom-in"],
-    out: {
-      keyframes: { scale: [1, 0.85], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-in-up": {
-    in: ANIMATIONS["zoom-in-up"],
-    out: {
-      keyframes: { scale: [1, 0.85], y: [0, -30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-in-down": {
-    in: ANIMATIONS["zoom-in-down"],
-    out: {
-      keyframes: { scale: [1, 0.85], y: [0, 30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-in-left": {
-    in: ANIMATIONS["zoom-in-left"],
-    out: {
-      keyframes: { scale: [1, 0.85], x: [0, -30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-in-right": {
-    in: ANIMATIONS["zoom-in-right"],
-    out: {
-      keyframes: { scale: [1, 0.85], x: [0, 30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-out": {
-    in: ANIMATIONS["zoom-out"],
-    out: {
-      keyframes: { scale: [1, 1.15], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-out-up": {
-    in: ANIMATIONS["zoom-out-up"],
-    out: {
-      keyframes: { scale: [1, 1.15], y: [0, -30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-out-down": {
-    in: ANIMATIONS["zoom-out-down"],
-    out: {
-      keyframes: { scale: [1, 1.15], y: [0, 30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-out-left": {
-    in: ANIMATIONS["zoom-out-left"],
-    out: {
-      keyframes: { scale: [1, 1.15], x: [0, -30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  "zoom-out-right": {
-    in: ANIMATIONS["zoom-out-right"],
-    out: {
-      keyframes: { scale: [1, 1.15], x: [0, 30], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.silkSlowOut },
-    },
-  },
-  // Special effects
-  rotate: {
-    in: ANIMATIONS.rotate,
-    out: {
-      keyframes: { rotate: [0, 90], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-    },
-  },
-  "rotate-scale": {
-    in: ANIMATIONS["rotate-scale"],
-    out: {
-      keyframes: { rotate: [0, 90], scale: [1, 0.85], opacity: [1, 0] },
-      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
-    },
-  },
-};
+import {
+  AnchorOffsets,
+  AosAnimationConfig,
+  PopupAnimationConfig,
+  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_POPUP = "data-motion-popup";
+//数字动画
+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,
+  PopupAnimationConfig | 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",
+    },
+  },
+};