@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/effects/wave-text.ts

@@ -0,0 +1,88 @@
+export interface WaveTextOptions {
+  amplitude?: number       // 波浪幅度像素
+  frequency?: number       // 波浪频率
+  speed?: number           // 波动速度
+  stagger?: number         // 字符间隔
+}
+
+const DEFAULT_WAVE: Required<WaveTextOptions> = {
+  amplitude: 15,
+  frequency: 0.3,
+  speed: 0.08,
+  stagger: 0.15,
+}
+
+export class WaveText {
+  private element: HTMLElement
+  private spans: HTMLSpanElement[] = []
+  private rafId: number | null = null
+  private originalHTML: string
+
+  constructor(element: HTMLElement | string) {
+    this.element =
+      typeof element === 'string'
+        ? document.querySelector(element)!
+        : element
+
+    if (!this.element) {
+      throw new Error('WaveText: element not found')
+    }
+
+    this.originalHTML = this.element.innerHTML
+  }
+
+  start(options: WaveTextOptions = {}): void {
+    this.stop()
+    const opts = { ...DEFAULT_WAVE, ...options }
+    const text = this.element.textContent ?? ''
+
+    this.element.innerHTML = ''
+    this.element.style.display = 'inline-block'
+
+    const chars = text.split('')
+    this.spans = chars.map((char) => {
+      const span = document.createElement('span')
+      span.textContent = char === ' ' ? '\u00A0' : char
+      span.style.display = 'inline-block'
+      span.style.transition = 'transform 0.1s linear'
+      this.element.appendChild(span)
+      return span
+    })
+
+    let time = 0
+
+    const tick = () => {
+      time += opts.speed
+      this.spans.forEach((span, i) => {
+        const offset = i * opts.stagger
+        const y = Math.sin(time + offset) * opts.amplitude
+        span.style.transform = `translateY(${y}px)`
+      })
+      this.rafId = requestAnimationFrame(tick)
+    }
+
+    this.rafId = requestAnimationFrame(tick)
+  }
+
+  stop(): void {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+    }
+  }
+
+  reset(): void {
+    this.stop()
+    this.element.innerHTML = this.originalHTML
+    this.element.style.display = ''
+  }
+}
+
+export function waveText(
+  element: HTMLElement | string,
+  options?: WaveTextOptions
+): () => void {
+  const wt = new WaveText(element)
+  wt.start(options)
+  return () => wt.stop()
+}

package/src/gesture/draggable.ts

@@ -0,0 +1,130 @@
+export interface DraggableOptions {
+  axis?: 'x' | 'y' | 'both'
+  bounds?: HTMLElement | string | null  // 限制拖拽范围
+  onStart?: (e: PointerEvent) => void
+  onDrag?: (x: number, y: number) => void
+  onEnd?: (x: number, y: number) => void
+}
+
+export class Draggable {
+  private element: HTMLElement
+  private options: Required<Omit<DraggableOptions, 'bounds' | 'onStart' | 'onDrag' | 'onEnd'>> &
+    Pick<DraggableOptions, 'bounds' | 'onStart' | 'onDrag' | 'onEnd'>
+  private startX = 0
+  private startY = 0
+  private currentX = 0
+  private currentY = 0
+  private initialTransformX = 0
+  private initialTransformY = 0
+  private pointerId: number | null = null
+
+  constructor(element: HTMLElement | string, options: DraggableOptions = {}) {
+    this.element =
+      typeof element === 'string'
+        ? document.querySelector<HTMLElement>(element)!
+        : element
+
+    if (!this.element) {
+      throw new Error('Draggable: element not found')
+    }
+
+    this.options = {
+      axis: options.axis ?? 'both',
+      bounds: options.bounds ?? null,
+      onStart: options.onStart,
+      onDrag: options.onDrag,
+      onEnd: options.onEnd,
+    }
+
+    this.element.style.touchAction = 'none'
+    this.element.addEventListener('pointerdown', this.onPointerDown)
+  }
+
+  private onPointerDown = (e: PointerEvent) => {
+    if (this.pointerId !== null) return
+
+    this.pointerId = e.pointerId
+    this.element.setPointerCapture(e.pointerId)
+
+    this.startX = e.clientX
+    this.startY = e.clientY
+
+    // 读取当前 transform 偏移
+    const computed = getComputedStyle(this.element).transform
+    if (computed !== 'none') {
+      const matrix = new DOMMatrix(computed)
+      this.initialTransformX = matrix.m41
+      this.initialTransformY = matrix.m42
+    } else {
+      this.initialTransformX = 0
+      this.initialTransformY = 0
+    }
+
+    this.currentX = this.initialTransformX
+    this.currentY = this.initialTransformY
+
+    this.options.onStart?.(e)
+
+    this.element.addEventListener('pointermove', this.onPointerMove)
+    this.element.addEventListener('pointerup', this.onPointerUp)
+  }
+
+  private onPointerMove = (e: PointerEvent) => {
+    if (e.pointerId !== this.pointerId) return
+
+    const deltaX = e.clientX - this.startX
+    const deltaY = e.clientY - this.startY
+
+    let newX = this.initialTransformX + deltaX
+    let newY = this.initialTransformY + deltaY
+
+    // 限制范围
+    if (this.options.bounds) {
+      const boundsEl =
+        typeof this.options.bounds === 'string'
+          ? document.querySelector<HTMLElement>(this.options.bounds)!
+          : this.options.bounds
+
+      if (boundsEl) {
+        const bRect = boundsEl.getBoundingClientRect()
+        const eRect = this.element.getBoundingClientRect()
+
+        const minX = bRect.left - eRect.left + newX
+        const maxX = bRect.right - eRect.right + newX
+        const minY = bRect.top - eRect.top + newY
+        const maxY = bRect.bottom - eRect.bottom + newY
+
+        newX = Math.max(minX, Math.min(maxX, newX))
+        newY = Math.max(minY, Math.min(maxY, newY))
+      }
+    }
+
+    if (this.options.axis === 'x') newY = this.initialTransformY
+    if (this.options.axis === 'y') newX = this.initialTransformX
+
+    this.currentX = newX
+    this.currentY = newY
+
+    this.element.style.transform = `translate3d(${newX}px, ${newY}px, 0)`
+    this.options.onDrag?.(newX, newY)
+  }
+
+  private onPointerUp = (e: PointerEvent) => {
+    if (e.pointerId !== this.pointerId) return
+
+    this.pointerId = null
+    this.element.releasePointerCapture(e.pointerId)
+    this.element.removeEventListener('pointermove', this.onPointerMove)
+    this.element.removeEventListener('pointerup', this.onPointerUp)
+
+    this.options.onEnd?.(this.currentX, this.currentY)
+  }
+
+  destroy(): void {
+    this.element.removeEventListener('pointerdown', this.onPointerDown)
+    if (this.pointerId !== null) {
+      this.element.releasePointerCapture(this.pointerId)
+      this.pointerId = null
+    }
+  }
+}

package/src/gesture/spring.ts

@@ -0,0 +1,152 @@
+export interface SpringOptions {
+  stiffness?: number    // 刚度，默认 170
+  damping?: number      // 阻尼，默认 26
+  mass?: number         // 质量，默认 1
+  precision?: number    // 停止精度，默认 0.01
+}
+
+const DEFAULT_SPRING: Required<SpringOptions> = {
+  stiffness: 170,
+  damping: 26,
+  mass: 1,
+  precision: 0.01,
+}
+
+export interface SpringTarget {
+  from: number
+  to: number
+  onUpdate: (value: number) => void
+  onComplete?: () => void
+}
+
+/**
+ * 物理弹簧动画，基于胡克定律
+ */
+export function spring(
+  target: SpringTarget,
+  options: SpringOptions = {}
+): () => void {
+  const opts = { ...DEFAULT_SPRING, ...options }
+
+  let velocity = 0
+  let current = target.from
+  let rafId: number
+  let running = true
+
+  const tick = () => {
+    if (!running) return
+
+    const displacement = current - target.to
+    const springForce = -opts.stiffness * displacement
+    const dampingForce = -opts.damping * velocity
+    const acceleration = (springForce + dampingForce) / opts.mass
+
+    velocity += acceleration * (1 / 60)
+    current += velocity * (1 / 60)
+
+    target.onUpdate(current)
+
+    if (
+      Math.abs(displacement) < opts.precision &&
+      Math.abs(velocity) < opts.precision
+    ) {
+      target.onUpdate(target.to)
+      target.onComplete?.()
+      running = false
+      return
+    }
+
+    rafId = requestAnimationFrame(tick)
+  }
+
+  rafId = requestAnimationFrame(tick)
+
+  return () => {
+    running = false
+    cancelAnimationFrame(rafId)
+  }
+}
+
+/**
+ * 弹性缩放：元素像弹簧一样弹到目标大小
+ */
+export function elasticScale(
+  element: HTMLElement | string,
+  toScale: number = 1,
+  options?: SpringOptions
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('elasticScale: element not found')
+
+  // 获取当前 scale
+  const computed = getComputedStyle(el).transform
+  let fromScale = 1
+  if (computed !== 'none') {
+    const matrix = new DOMMatrix(computed)
+    fromScale = Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b)
+  }
+
+  return spring(
+    {
+      from: fromScale,
+      to: toScale,
+      onUpdate: (value) => {
+        el.style.transform = `scale(${value})`
+      },
+    },
+    options
+  )
+}
+
+/**
+ * 弹性移动
+ */
+export function elasticMove(
+  element: HTMLElement | string,
+  toX: number,
+  toY: number,
+  options?: SpringOptions
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('elasticMove: element not found')
+
+  let currentX = 0
+  let currentY = 0
+
+  const stopX = spring(
+    {
+      from: 0,
+      to: toX,
+      onUpdate: (x) => {
+        currentX = x
+        el.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`
+      },
+    },
+    options
+  )
+
+  const stopY = spring(
+    {
+      from: 0,
+      to: toY,
+      onUpdate: (y) => {
+        currentY = y
+        el.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`
+      },
+    },
+    options
+  )
+
+  return () => {
+    stopX()
+    stopY()
+  }
+}

package/src/index.ts

@@ -0,0 +1,162 @@
+import './styles/animations.css'
+import './styles/element-plus.css'
+import './components/styles/variables.css'
+import './components/styles/tokens.css'
+import './components/styles/reset.css'
+
+/* Component styles */
+import './components/styles/components.css'
+
+/* ===== Core ===== */
+export { Animator } from './core/animator.ts'
+export { Timeline } from './core/timeline.ts'
+export type { AnimationName, AnimationOptions } from './core/utils.ts'
+
+/* ===== Presets ===== */
+export {
+  fadeIn, fadeOut,
+  slideInUp, slideInDown, slideInLeft, slideInRight,
+  slideOutUp, slideOutDown,
+  zoomIn, zoomOut,
+  bounceIn, bounceOut,
+  flipInX, flipInY,
+  shake, pulse, rotateIn,
+} from './presets/index.ts'
+export * as presets from './presets/index.ts'
+
+/* ===== Scroll ===== */
+export { ScrollTrigger, scrollAnimate } from './scroll/scroll-trigger.ts'
+export type { ScrollTriggerOptions } from './scroll/scroll-trigger.ts'
+
+/* ===== Text ===== */
+export { Typewriter, typewrite } from './text/typewriter.ts'
+export { CountUp, countUp } from './text/count-up.ts'
+export type { TypewriterOptions } from './text/typewriter.ts'
+export type { CountUpOptions } from './text/count-up.ts'
+
+/* ===== Gesture ===== */
+export { spring, elasticScale, elasticMove } from './gesture/spring.ts'
+export { Draggable } from './gesture/draggable.ts'
+export type { SpringOptions, SpringTarget } from './gesture/spring.ts'
+export type { DraggableOptions } from './gesture/draggable.ts'
+
+/* ===== Micro ===== */
+export { addRipple, rippleEffect } from './micro/ripple.ts'
+export { hoverLift, hoverGlow } from './micro/hover-lift.ts'
+export type { RippleOptions } from './micro/ripple.ts'
+export type { HoverLiftOptions } from './micro/hover-lift.ts'
+
+/* ===== Effects (视觉炸裂) ===== */
+export { particleBurst, particleAt } from './effects/particle.ts'
+export { TextSplit, splitText } from './effects/text-split.ts'
+export { glitch, glitchLoop } from './effects/glitch.ts'
+export { WaveText, waveText } from './effects/wave-text.ts'
+export type { ParticleOptions } from './effects/particle.ts'
+export type { TextSplitOptions } from './effects/text-split.ts'
+export type { GlitchOptions } from './effects/glitch.ts'
+export type { WaveTextOptions } from './effects/wave-text.ts'
+
+/* ===== Transitions (实用高级) ===== */
+export { parallax, parallaxGroup } from './transitions/parallax.ts'
+export { shimmer, skeleton } from './transitions/shimmer.ts'
+export { blurReveal, blurRevealChildren } from './transitions/blur-reveal.ts'
+export { lazyImage, lazyImages } from './transitions/lazy-image.ts'
+export type { ParallaxOptions } from './transitions/parallax.ts'
+export type { ShimmerOptions } from './transitions/shimmer.ts'
+export type { BlurRevealOptions } from './transitions/blur-reveal.ts'
+export type { LazyImageOptions } from './transitions/lazy-image.ts'
+
+/* ===== Element Plus 风格过渡 ===== */
+export { expand, collapse, toggleCollapse } from './transitions/collapse.ts'
+export { listStagger } from './transitions/list.ts'
+export { showLoading, fullscreenLoading } from './transitions/loading.ts'
+export { toast, toastSuccess, toastError, toastWarning, notify } from './transitions/toast.ts'
+export type { CollapseOptions } from './transitions/collapse.ts'
+export type { ListStaggerOptions } from './transitions/list.ts'
+export type { LoadingOptions } from './transitions/loading.ts'
+export type { ToastOptions } from './transitions/toast.ts'
+
+/* ===== Interactive (游戏/交互) ===== */
+export { magnetic, magneticText } from './interactive/magnetic.ts'
+export { CoverFlow, createCoverFlow } from './interactive/coverflow.ts'
+export { FlipCard, createFlipCard } from './interactive/flip-card.ts'
+export { cursorTrail } from './interactive/cursor-trail.ts'
+export type { MagneticOptions } from './interactive/magnetic.ts'
+export type { CoverFlowOptions } from './interactive/coverflow.ts'
+export type { FlipCardOptions } from './interactive/flip-card.ts'
+export type { CursorTrailOptions } from './interactive/cursor-trail.ts'
+
+/* ===== Motion System ===== */
+export { withMotion, staggerEnter } from './motion/component-motion.ts'
+export type { MotionOptions, MicroAnimation } from './motion/component-motion.ts'
+
+/* ===== A11y ===== */
+export { FocusTrap } from './a11y/focus-trap.ts'
+export { onKey, Keys } from './a11y/keyboard.ts'
+
+/* ===== Theme ===== */
+export { theme, ThemeManager } from './theme/theme.ts'
+
+/* ===== Layout ===== */
+export { MkRow, createRow } from './components/layout/row.ts'
+export { MkSpace, createSpace } from './components/layout/space.ts'
+export { MkDivider, createDivider } from './components/layout/divider.ts'
+
+/* ===== UI Components ===== */
+export { MkButton, createButton } from './components/button/button.ts'
+export { MkInput, createInput } from './components/input/input.ts'
+export { MkCard, createCard } from './components/card/card.ts'
+export { MkDialog, createDialog } from './components/dialog/dialog.ts'
+export { MkDrawer, createDrawer } from './components/drawer/drawer.ts'
+export { message, messageSuccess, messageError, messageWarning } from './components/message/message.ts'
+export { MkSwitch, createSwitch } from './components/switch/switch.ts'
+export { showLoading as showComponentLoading, showFullscreenLoading } from './components/loading/loading.ts'
+
+/* ===== Form Components ===== */
+export { MkSelect, createSelect } from './components/form/select.ts'
+export { MkCheckbox, createCheckbox, MkCheckboxGroup } from './components/form/checkbox.ts'
+export { MkRadio, MkRadioGroup } from './components/form/radio.ts'
+export { MkSlider } from './components/form/slider.ts'
+
+/* ===== Table ===== */
+export { MkTable } from './components/table/table.ts'
+
+/* ===== New Components ===== */
+export { MkTag, createTag } from './components/tag/tag.ts'
+export { createTooltip } from './components/tooltip/tooltip.ts'
+export { MkTabs, createTabs } from './components/tabs/tabs.ts'
+export { MkAvatar, createAvatar } from './components/avatar/avatar.ts'
+export { MkAlert, createAlert } from './components/alert/alert.ts'
+export { MkProgress, createProgress } from './components/progress/progress.ts'
+export { MkCollapse, createCollapse } from './components/collapse/collapse.ts'
+export { MkEmpty, createEmpty } from './components/empty/empty.ts'
+export { MkPopover, createPopover } from './components/popover/popover.ts'
+export { MkMenu, createMenu } from './components/menu/menu.ts'
+export { MkBreadcrumb, createBreadcrumb } from './components/breadcrumb/breadcrumb.ts'
+export { MkSteps, createSteps } from './components/steps/steps.ts'
+
+/* ===== Types ===== */
+export type { ButtonOptions } from './components/button/button.ts'
+export type { InputOptions } from './components/input/input.ts'
+export type { CardOptions } from './components/card/card.ts'
+export type { DialogOptions } from './components/dialog/dialog.ts'
+export type { DrawerOptions } from './components/drawer/drawer.ts'
+export type { MessageOptions } from './components/message/message.ts'
+export type { SwitchOptions } from './components/switch/switch.ts'
+export type { SelectOptions, SelectOption } from './components/form/select.ts'
+export type { CheckboxOptions } from './components/form/checkbox.ts'
+export type { RadioOptions } from './components/form/radio.ts'
+export type { SliderOptions } from './components/form/slider.ts'
+export type { TableColumn, TableOptions } from './components/table/table.ts'
+export type { TagOptions } from './components/tag/tag.ts'
+export type { TooltipOptions } from './components/tooltip/tooltip.ts'
+export type { TabsOptions, TabItem } from './components/tabs/tabs.ts'
+export type { AvatarOptions } from './components/avatar/avatar.ts'
+export type { AlertOptions } from './components/alert/alert.ts'
+export type { ProgressOptions } from './components/progress/progress.ts'
+export type { CollapsePanelOptions, CollapseItem } from './components/collapse/collapse.ts'
+export type { EmptyOptions } from './components/empty/empty.ts'
+export type { PopoverOptions } from './components/popover/popover.ts'
+export type { MenuOptions, MenuItem } from './components/menu/menu.ts'
+export type { BreadcrumbOptions, BreadcrumbItem } from './components/breadcrumb/breadcrumb.ts'
+export type { StepsOptions, StepItem } from './components/steps/steps.ts'

package/src/interactive/coverflow.ts

@@ -0,0 +1,100 @@
+export interface CoverFlowOptions {
+  perspective?: number     // 透视距离
+  rotateY?: number         // 两侧卡片旋转角度
+  spacing?: number         // 卡片间距
+  scale?: number           // 中心卡片缩放
+}
+
+const DEFAULT_COVERFLOW: Required<CoverFlowOptions> = {
+  perspective: 800,
+  rotateY: 45,
+  spacing: 60,
+  scale: 1.15,
+}
+
+/**
+ * 3D 封面流轮播
+ */
+export class CoverFlow {
+  private container: HTMLElement
+  private cards: HTMLElement[]
+  private currentIndex = 0
+  private options: Required<CoverFlowOptions>
+
+  constructor(
+    container: HTMLElement | string,
+    cardSelector: string,
+    options: CoverFlowOptions = {}
+  ) {
+    this.container =
+      typeof container === 'string'
+        ? document.querySelector<HTMLElement>(container)!
+        : container
+
+    if (!this.container) {
+      throw new Error('CoverFlow: container not found')
+    }
+
+    this.cards = Array.from(this.container.querySelectorAll(cardSelector))
+    this.options = { ...DEFAULT_COVERFLOW, ...options }
+
+    this.container.style.perspective = `${this.options.perspective}px`
+    this.container.style.transformStyle = 'preserve-3d'
+
+    this.update()
+  }
+
+  goTo(index: number): this {
+    this.currentIndex = Math.max(0, Math.min(index, this.cards.length - 1))
+    this.update()
+    return this
+  }
+
+  next(): this {
+    return this.goTo(this.currentIndex + 1)
+  }
+
+  prev(): this {
+    return this.goTo(this.currentIndex - 1)
+  }
+
+  private update(): void {
+    this.cards.forEach((card, i) => {
+      const offset = i - this.currentIndex
+      const absOffset = Math.abs(offset)
+
+      let translateX = offset * this.options.spacing
+      let rotateY = offset > 0 ? -this.options.rotateY : this.options.rotateY
+      let scale = 1
+      let zIndex = this.cards.length - absOffset
+      let opacity = 1
+
+      if (offset === 0) {
+        rotateY = 0
+        scale = this.options.scale
+        zIndex = this.cards.length + 1
+      } else if (absOffset > 2) {
+        opacity = 0
+        zIndex = 0
+      } else {
+        opacity = 1 - absOffset * 0.3
+      }
+
+      card.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'
+      card.style.transform = `translateX(${translateX}px) rotateY(${rotateY}deg) scale(${scale})`
+      card.style.zIndex = String(zIndex)
+      card.style.opacity = String(opacity)
+    })
+  }
+}
+
+/**
+ * 快捷方法创建 CoverFlow
+ */
+export function createCoverFlow(
+  container: HTMLElement | string,
+  cardSelector: string,
+  options?: CoverFlowOptions
+): CoverFlow {
+  return new CoverFlow(container, cardSelector, options)
+}