@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/text/count-up.ts

@@ -0,0 +1,108 @@
+export interface CountUpOptions {
+  duration?: number       // 动画总时长毫秒
+  easing?: 'linear' | 'easeOut' | 'easeInOut'
+  decimals?: number       // 小数位
+  prefix?: string         // 前缀
+  suffix?: string         // 后缀
+  separator?: string      // 千分位分隔符
+  onUpdate?: (value: number) => void
+  onComplete?: () => void
+}
+
+const DEFAULT_COUNT_OPTS: Required<Omit<CountUpOptions, 'onUpdate' | 'onComplete'>> = {
+  duration: 2000,
+  easing: 'easeOut',
+  decimals: 0,
+  prefix: '',
+  suffix: '',
+  separator: ',',
+}
+
+export class CountUp {
+  private element: HTMLElement
+  private rafId: number | null = null
+
+  constructor(element: HTMLElement | string) {
+    this.element =
+      typeof element === 'string'
+        ? document.querySelector(element)!
+        : element
+
+    if (!this.element) {
+      throw new Error('CountUp: element not found')
+    }
+  }
+
+  animateTo(
+    endValue: number,
+    startValue: number = 0,
+    options: CountUpOptions = {}
+  ): Promise<void> {
+    const opts = { ...DEFAULT_COUNT_OPTS, ...options }
+    const startTime = performance.now()
+
+    return new Promise((resolve) => {
+      const tick = (now: number) => {
+        const elapsed = now - startTime
+        const progress = Math.min(elapsed / opts.duration, 1)
+        const eased = this.applyEasing(progress, opts.easing)
+        const current = startValue + (endValue - startValue) * eased
+
+        this.render(current, opts)
+        opts.onUpdate?.(current)
+
+        if (progress < 1) {
+          this.rafId = requestAnimationFrame(tick)
+        } else {
+          this.render(endValue, opts)
+          opts.onComplete?.()
+          resolve()
+        }
+      }
+
+      this.rafId = requestAnimationFrame(tick)
+    })
+  }
+
+  stop(): void {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+    }
+  }
+
+  private render(value: number, opts: CountUpOptions): void {
+    let formatted = value.toFixed(opts.decimals!)
+
+    // 千分位
+    if (opts.separator) {
+      const parts = formatted.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, opts.separator!)
+      formatted = parts.join('.')
+    }
+
+    this.element.textContent = `${opts.prefix}${formatted}${opts.suffix}`
+  }
+
+  private applyEasing(t: number, easing: string): number {
+    switch (easing) {
+      case 'easeOut':
+        return 1 - Math.pow(1 - t, 3)
+      case 'easeInOut':
+        return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+      default:
+        return t
+    }
+  }
+}
+
+/**
+ * 快捷方法
+ */
+export function countUp(
+  element: HTMLElement | string,
+  endValue: number,
+  options?: CountUpOptions
+): Promise<void> {
+  return new CountUp(element).animateTo(endValue, 0, options)
+}

package/src/text/typewriter.ts

@@ -0,0 +1,109 @@
+export interface TypewriterOptions {
+  speed?: number        // 每个字间隔毫秒
+  cursor?: boolean      // 是否显示闪烁光标
+  cursorChar?: string   // 光标字符
+  onComplete?: () => void
+}
+
+const DEFAULT_TYPE_OPTS: Required<Omit<TypewriterOptions, 'onComplete'>> = {
+  speed: 80,
+  cursor: true,
+  cursorChar: '|',
+}
+
+export class Typewriter {
+  private element: HTMLElement
+  private originalText: string = ''
+  private timer: ReturnType<typeof setTimeout> | null = null
+  private running = false
+
+  constructor(element: HTMLElement | string) {
+    this.element =
+      typeof element === 'string'
+        ? document.querySelector(element)!
+        : element
+
+    if (!this.element) {
+      throw new Error('Typewriter: element not found')
+    }
+
+    this.originalText = this.element.textContent ?? ''
+  }
+
+  async start(options: TypewriterOptions = {}): Promise<void> {
+    if (this.running) return
+    this.running = true
+
+    const opts = { ...DEFAULT_TYPE_OPTS, ...options }
+    const text = this.originalText || this.element.textContent || ''
+    this.element.textContent = ''
+
+    if (opts.cursor) {
+      this.element.style.borderRight = `2px solid currentColor`
+      this.element.style.paddingRight = '2px'
+      this.startCursorBlink()
+    }
+
+    return new Promise((resolve) => {
+      let i = 0
+      const typeNext = () => {
+        if (!this.running) {
+          resolve()
+          return
+        }
+
+        if (i < text.length) {
+          this.element.textContent += text.charAt(i)
+          i++
+          this.timer = setTimeout(typeNext, opts.speed)
+        } else {
+          this.running = false
+          opts.onComplete?.()
+          resolve()
+        }
+      }
+      typeNext()
+    })
+  }
+
+  stop(): void {
+    this.running = false
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+  }
+
+  reset(): void {
+    this.stop()
+    this.element.textContent = this.originalText
+    this.element.style.borderRight = 'none'
+    this.element.style.paddingRight = '0'
+  }
+
+  private startCursorBlink(): void {
+    let visible = true
+    const blink = () => {
+      if (!this.running) {
+        this.element.style.borderRightColor = 'transparent'
+        return
+      }
+      this.element.style.borderRightColor = visible ? 'currentColor' : 'transparent'
+      visible = !visible
+      setTimeout(blink, 530)
+    }
+    blink()
+  }
+}
+
+/**
+ * 快捷方法
+ */
+export function typewrite(
+  element: HTMLElement | string,
+  options?: TypewriterOptions
+): Promise<void> {
+  const tw = new Typewriter(element)
+  tw.reset()
+  return tw.start(options)
+}

package/src/theme/dark.css

@@ -0,0 +1,19 @@
+[data-mk-theme="dark"] {
+  --mk-bg: #09090b;
+  --mk-surface: #12121a;
+  --mk-surface-hover: #1a1a25;
+  --mk-border: #1f1f2e;
+  --mk-border-hover: #2e2e42;
+
+  --mk-primary: #6366f1;
+  --mk-primary-hover: #818cf8;
+  --mk-primary-active: #4f46e5;
+
+  --mk-success: #22c55e;
+  --mk-warning: #f59e0b;
+  --mk-danger: #ef4444;
+
+  --mk-text: #f8fafc;
+  --mk-text-secondary: #94a3b8;
+  --mk-text-tertiary: #64748b;
+}

package/src/theme/light.css

@@ -0,0 +1,19 @@
+[data-mk-theme="light"] {
+  --mk-bg: #ffffff;
+  --mk-surface: #f8fafc;
+  --mk-surface-hover: #f1f5f9;
+  --mk-border: #e2e8f0;
+  --mk-border-hover: #cbd5e1;
+
+  --mk-primary: #6366f1;
+  --mk-primary-hover: #4f46e5;
+  --mk-primary-active: #4338ca;
+
+  --mk-success: #22c55e;
+  --mk-warning: #f59e0b;
+  --mk-danger: #ef4444;
+
+  --mk-text: #0f172a;
+  --mk-text-secondary: #475569;
+  --mk-text-tertiary: #94a3b8;
+}

package/src/theme/theme.ts

@@ -0,0 +1,65 @@
+export interface ThemeConfig {
+  bg?: string
+  surface?: string
+  'surface-hover'?: string
+  border?: string
+  'border-hover'?: string
+  primary?: string
+  'primary-hover'?: string
+  'primary-active'?: string
+  success?: string
+  warning?: string
+  danger?: string
+  text?: string
+  'text-secondary'?: string
+  'text-tertiary'?: string
+}
+
+export class ThemeManager {
+  private currentTheme: 'light' | 'dark' = 'dark'
+  private listeners = new Set<(theme: 'light' | 'dark') => void>()
+
+  constructor() {
+    // 默认暗色
+    document.documentElement.setAttribute('data-mk-theme', 'dark')
+  }
+
+  setTheme(theme: 'light' | 'dark'): void {
+    this.currentTheme = theme
+    document.documentElement.setAttribute('data-mk-theme', theme)
+    this.listeners.forEach((fn) => fn(theme))
+  }
+
+  toggle(): void {
+    this.setTheme(this.currentTheme === 'dark' ? 'light' : 'dark')
+  }
+
+  getTheme(): 'light' | 'dark' {
+    return this.currentTheme
+  }
+
+  applyCustom(config: ThemeConfig): void {
+    const root = document.documentElement
+    Object.entries(config).forEach(([key, value]) => {
+      root.style.setProperty(`--mk-${key}`, value)
+    })
+  }
+
+  resetCustom(): void {
+    const root = document.documentElement
+    const props = [
+      'bg', 'surface', 'surface-hover', 'border', 'border-hover',
+      'primary', 'primary-hover', 'primary-active',
+      'success', 'warning', 'danger',
+      'text', 'text-secondary', 'text-tertiary',
+    ]
+    props.forEach((p) => root.style.removeProperty(`--mk-${p}`))
+  }
+
+  onChange(fn: (theme: 'light' | 'dark') => void): () => void {
+    this.listeners.add(fn)
+    return () => this.listeners.delete(fn)
+  }
+}
+
+export const theme = new ThemeManager()

package/src/transitions/blur-reveal.ts

@@ -0,0 +1,92 @@
+export interface BlurRevealOptions {
+  duration?: number
+  blurStart?: number       // 初始模糊像素
+  stagger?: number         // 子元素间隔
+  childSelector?: string   // 子元素选择器
+}
+
+const DEFAULT_BLUR: Required<Omit<BlurRevealOptions, 'childSelector'>> = {
+  duration: 800,
+  blurStart: 10,
+  stagger: 100,
+}
+
+/**
+ * 元素从模糊到清晰的渐入效果
+ */
+export function blurReveal(
+  element: HTMLElement | string,
+  options: BlurRevealOptions = {}
+): Promise<void> {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('blurReveal: element not found')
+
+  const opts = { ...DEFAULT_BLUR, ...options }
+
+  el.style.filter = `blur(${opts.blurStart}px)`
+  el.style.opacity = '0'
+  el.style.transition = `filter ${opts.duration}ms ease, opacity ${opts.duration}ms ease`
+
+  // 强制重排
+  el.offsetHeight
+
+  return new Promise((resolve) => {
+    el.style.filter = 'blur(0px)'
+    el.style.opacity = '1'
+
+    setTimeout(() => {
+      el.style.transition = ''
+      resolve()
+    }, opts.duration)
+  })
+}
+
+/**
+ * 子元素依次模糊渐入
+ */
+export function blurRevealChildren(
+  element: HTMLElement | string,
+  options: BlurRevealOptions = {}
+): Promise<void> {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('blurRevealChildren: element not found')
+
+  const opts = { ...DEFAULT_BLUR, ...options }
+  const children = opts.childSelector
+    ? Array.from(el.querySelectorAll(opts.childSelector))
+    : Array.from(el.children)
+
+  children.forEach((child) => {
+    const c = child as HTMLElement
+    c.style.filter = `blur(${opts.blurStart}px)`
+    c.style.opacity = '0'
+    c.style.transition = `filter ${opts.duration}ms ease, opacity ${opts.duration}ms ease`
+  })
+
+  el.offsetHeight
+
+  return new Promise((resolve) => {
+    let done = 0
+    children.forEach((child, i) => {
+      setTimeout(() => {
+        const c = child as HTMLElement
+        c.style.filter = 'blur(0px)'
+        c.style.opacity = '1'
+
+        setTimeout(() => {
+          c.style.transition = ''
+          done++
+          if (done >= children.length) resolve()
+        }, opts.duration)
+      }, i * opts.stagger)
+    })
+  })
+}

package/src/transitions/collapse.ts

@@ -0,0 +1,112 @@
+export interface CollapseOptions {
+  duration?: number
+  easing?: string
+}
+
+const DEFAULT_COLLAPSE: Required<CollapseOptions> = {
+  duration: 300,
+  easing: 'ease-in-out',
+}
+
+/**
+ * 高度展开动画（模拟 Vue 的 collapse-transition）
+ */
+export function expand(
+  element: HTMLElement | string,
+  options: CollapseOptions = {}
+): Promise<void> {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('expand: element not found')
+
+  const opts = { ...DEFAULT_COLLAPSE, ...options }
+
+  el.style.overflow = 'hidden'
+  el.style.display = ''
+  const fullHeight = el.scrollHeight
+
+  el.style.height = '0px'
+  el.style.opacity = '0'
+  el.style.transition = `height ${opts.duration}ms ${opts.easing}, opacity ${opts.duration}ms ${opts.easing}`
+
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      el.style.height = `${fullHeight}px`
+      el.style.opacity = '1'
+
+      setTimeout(() => {
+        el.style.height = ''
+        el.style.overflow = ''
+        el.style.transition = ''
+        el.style.opacity = ''
+        resolve()
+      }, opts.duration)
+    })
+  })
+}
+
+/**
+ * 高度折叠动画
+ */
+export function collapse(
+  element: HTMLElement | string,
+  options: CollapseOptions = {}
+): Promise<void> {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('collapse: element not found')
+
+  const opts = { ...DEFAULT_COLLAPSE, ...options }
+  const fullHeight = el.scrollHeight
+
+  el.style.overflow = 'hidden'
+  el.style.height = `${fullHeight}px`
+  el.style.transition = `height ${opts.duration}ms ${opts.easing}, opacity ${opts.duration}ms ${opts.easing}`
+
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      el.style.height = '0px'
+      el.style.opacity = '0'
+
+      setTimeout(() => {
+        el.style.display = 'none'
+        el.style.height = ''
+        el.style.overflow = ''
+        el.style.transition = ''
+        el.style.opacity = ''
+        resolve()
+      }, opts.duration)
+    })
+  })
+}
+
+/**
+ * 切换展开/折叠
+ */
+export async function toggleCollapse(
+  element: HTMLElement | string,
+  options?: CollapseOptions
+): Promise<boolean> {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('toggleCollapse: element not found')
+
+  const isHidden = getComputedStyle(el).display === 'none' || el.offsetHeight === 0
+
+  if (isHidden) {
+    await expand(el, options)
+    return true
+  } else {
+    await collapse(el, options)
+    return false
+  }
+}

package/src/transitions/lazy-image.ts

@@ -0,0 +1,87 @@
+export interface LazyImageOptions {
+  threshold?: number
+  rootMargin?: string
+  blur?: boolean           // 加载前是否模糊
+  placeholder?: string     // 占位背景色
+}
+
+const DEFAULT_LAZY: Required<LazyImageOptions> = {
+  threshold: 0.1,
+  rootMargin: '50px',
+  blur: true,
+  placeholder: '#1e293b',
+}
+
+/**
+ * 图片懒加载：进入视口时加载，并带渐入动画
+ */
+export function lazyImage(
+  imgElement: HTMLImageElement | string,
+  options: LazyImageOptions = {}
+): () => void {
+  const img =
+    typeof imgElement === 'string'
+      ? document.querySelector<HTMLImageElement>(imgElement)!
+      : imgElement
+
+  if (!img) throw new Error('lazyImage: image not found')
+
+  const opts = { ...DEFAULT_LAZY, ...options }
+  const realSrc = img.dataset.src
+
+  if (!realSrc) {
+    console.warn('lazyImage: img 缺少 data-src 属性')
+    return () => {}
+  }
+
+  img.style.background = opts.placeholder
+  img.style.transition = 'opacity 0.6s ease, filter 0.6s ease'
+
+  if (opts.blur) {
+    img.style.filter = 'blur(8px)'
+    img.style.opacity = '0.5'
+  } else {
+    img.style.opacity = '0'
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const image = entry.target as HTMLImageElement
+          const src = image.dataset.src!
+
+          const temp = new Image()
+          temp.onload = () => {
+            image.src = src
+            image.style.opacity = '1'
+            image.style.filter = 'blur(0px)'
+            image.style.background = ''
+          }
+          temp.onerror = () => {
+            image.style.opacity = '1'
+            image.style.filter = 'blur(0px)'
+          }
+          temp.src = src
+
+          observer.unobserve(image)
+        }
+      })
+    },
+    { threshold: opts.threshold, rootMargin: opts.rootMargin }
+  )
+
+  observer.observe(img)
+
+  return () => observer.disconnect()
+}
+
+/**
+ * 批量处理页面内所有懒加载图片
+ */
+export function lazyImages(selector: string = 'img[data-src]'): () => void {
+  const images = document.querySelectorAll<HTMLImageElement>(selector)
+  const cleaners = Array.from(images).map((img) => lazyImage(img))
+
+  return () => cleaners.forEach((fn) => fn())
+}

package/src/transitions/list.ts

@@ -0,0 +1,75 @@
+export interface ListStaggerOptions {
+  stagger?: number         // 每项间隔毫秒
+  duration?: number        // 单个动画时长
+  animation?: 'fadeUp' | 'fadeDown' | 'fadeLeft' | 'fadeRight' | 'zoom'
+}
+
+const DEFAULT_LIST: Required<ListStaggerOptions> = {
+  stagger: 60,
+  duration: 400,
+  animation: 'fadeUp',
+}
+
+const PRESETS: Record<string, { from: string; to: string }> = {
+  fadeUp: {
+    from: 'opacity:0;transform:translate3d(0,16px,0)',
+    to: 'opacity:1;transform:translate3d(0,0,0)',
+  },
+  fadeDown: {
+    from: 'opacity:0;transform:translate3d(0,-16px,0)',
+    to: 'opacity:1;transform:translate3d(0,0,0)',
+  },
+  fadeLeft: {
+    from: 'opacity:0;transform:translate3d(16px,0,0)',
+    to: 'opacity:1;transform:translate3d(0,0,0)',
+  },
+  fadeRight: {
+    from: 'opacity:0;transform:translate3d(-16px,0,0)',
+    to: 'opacity:1;transform:translate3d(0,0,0)',
+  },
+  zoom: {
+    from: 'opacity:0;transform:scale3d(0.9,0.9,0.9)',
+    to: 'opacity:1;transform:scale3d(1,1,1)',
+  },
+}
+
+/**
+ * 列表项依次入场动画（类似 Element Plus Table 行入场）
+ */
+export function listStagger(
+  container: HTMLElement | string,
+  options: ListStaggerOptions = {}
+): Promise<void> {
+  const el =
+    typeof container === 'string'
+      ? document.querySelector<HTMLElement>(container)!
+      : container
+
+  if (!el) throw new Error('listStagger: container not found')
+
+  const opts = { ...DEFAULT_LIST, ...options }
+  const preset = PRESETS[opts.animation]
+  const items = Array.from(el.children) as HTMLElement[]
+
+  items.forEach((item) => {
+    item.style.cssText += preset.from
+  })
+
+  el.offsetHeight // 强制重排
+
+  return new Promise((resolve) => {
+    let done = 0
+    items.forEach((item, i) => {
+      setTimeout(() => {
+        item.style.transition = `all ${opts.duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`
+        item.style.cssText += preset.to
+
+        setTimeout(() => {
+          item.style.transition = ''
+          done++
+          if (done >= items.length) resolve()
+        }, opts.duration)
+      }, i * opts.stagger)
+    })
+  })
+}