🪄 vue-fx

Vue 3 动画特效组件库。轻量、零依赖（仅 peer vue）、TypeScript 支持。

安装

npm install vue-fx

快速上手

全局注册

// main.ts
import { createApp } from 'vue'
import VueFx from 'vue-fx'

const app = createApp(App)
app.use(VueFx) // 全局注册所有组件

按需导入

<script setup>
import { ParticleBg, TextScramble, WaveButton } from 'vue-fx'
</script>

组件

<ParticleBg> — 粒子背景

可交互的 Canvas 粒子背景，鼠标靠近粒子会被推开，近距离粒子自动连线。

<template>
  <div style="width: 100%; height: 400px;">
    <ParticleBg
      :count="100"
      color="#00c8ff"
      :connect-distance="150"
      :interactive="true"
    />
  </div>
</template>

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | count | number | 80 | 粒子数量 | | color | string \| string[] | 'rgba(0,200,255,0.8)' | 粒子颜色，数组则随机取 | | connectDistance | number | 120 | 连线最大距离 (px) | | radiusRange | [number, number] | [1.5, 3] | 粒子半径范围 | | speed | number | 1 | 运动速度倍率 | | interactive | boolean | true | 是否响应鼠标 | | mouseRadius | number | 150 | 鼠标影响范围 (px) | | background | string | 'transparent' | 背景色 |

<TextScramble> — 文字解密

黑客风格文字乱序解密动画，支持单文本或轮播。

<template>
  <TextScramble
    :texts="['Hello World', '你好世界', 'こんにちは']"
    :interval="2000"
  />
</template>

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | text | string | '' | 单次动画目标文本 | | texts | string[] | [] | 文本列表（自动轮播） | | interval | number | 3000 | 轮播间隔 (ms) | | chars | string | '01!<>-_\\/[]{}—=+*^?#' | 乱序字符集 | | speed | number | 30 | 每字符动画耗时 (ms) | | tag | string | 'span' | 渲染标签 |

方法 (通过 ref 调用)：

const ref = useTemplateRef('scramble')
ref.value?.scramble('New Text') // 手动触发动画

<WaveButton> — 波纹按钮

Material Design 风格的水波纹按钮，点击时从鼠标位置扩散波纹。

<template>
  <WaveButton @click="handleClick">点击我</WaveButton>
</template>

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | rippleColor | string | 'rgba(255,255,255,0.4)' | 波纹颜色 | | duration | number | 600 | 动画时长 (ms) | | tag | string | 'button' | 渲染标签 | | disabled | boolean | false | 禁用状态 |

进阶：使用底层 composable

组件内部逻辑以 composable 形式暴露，你可以直接调用来自定义：

import { useParticle, useTextScramble } from 'vue-fx'

// 在任意 canvas 上启动粒子系统
const particle = useParticle(canvasElement, {
  count: 100,
  color: ['#ff0080', '#7928ca', '#00c8ff'],
  connectDistance: 100,
  radiusRange: [2, 5],
  speed: 0.8,
  interactive: true,
  mouseRadius: 200,
  background: '#0a0a0a',
})
particle.start()

许可

MIT