Vue Bits：让 Vue 3 动效组件库火遍全球的”神器”！

前言：还记得那个让 React 开发者疯狂的 React Bits 吗？现在，它的 Vue 3 官方移植版来了！Vue Bits 将带你体验前所未有的动效开发体验！

什么是 Vue Bits？

Vue Bits 是国外爆火的 React UI 动效组件库 React Bits 的 Vue 3 官方移植版。它继承了 React Bits 的所有精华，同时完美适配 Vue 3 的响应式系统，为 Vue 开发者带来了一整套精美的动效组件解决方案。

在介绍 Vue Bits 之前，有必要提一提 React Bits 的火爆，这是一个 React 技术栈下的动画库，可以实现非常惊艳的动画效果，前段时间靠一条「Splash Cursor」动画效果的 10 秒演示视频播放量破 200 万，被开发者誉为 “最艺术的 UI 库”，并入选 “年度 10 大 React 工具”。

而今天介绍的 Vue Bits 是由 React Bits 的原作者用一周时间基于 Vue 3 完成了移植，动画效果和使用方式与 React 版完全一致，可以轻松实现惊艳动效，节省大量时间和精力。

核心特性

• 丰富的动效组件：有超过 90 个精心设计的动画组件，涵盖按钮、菜单、卡片、文本效果等多个类别，动画效果优雅惊艳，可以满足各种场景需求
• TypeScript 支持：直接完全由 TypeScript 开发
• 性能优化：这些动画组件都经过优化，减少不必要的 DOM 操作和重绘，才让动画如此优雅流畅
• 响应式设计：所有组件都支持响应式特性，在电脑、手机或者平板设备上都是一样的表现
• 零依赖设计：大部分组件无需外部依赖，保持轻量级
• 高度可定制：通过 props 轻松定制组件行为
• 开箱即用：复制粘贴即可使用，无需复杂配置

技术特性

Vue Bits 的核心优势在于其丰富多样的动画组件和高度优化的性能表现：

性能优化技术

大神毕竟是大神，和我们自己写的粗糙动画代码不同，Vue Bits 是用位运算进行状态管理，通过操作二进制位来实现状态的存储和检查，相比传统的数组或对象操作，内存占用更低，执行速度更快。这在处理大量布尔状态或需要性能优化的动画场景中非常有用。

快速开始

Vue Bits 使用 jsrepo 帮助您通过 CLI 安装组件——您可以按照以下步骤在整个项目范围内进行设置。

1. 为你的项目初始化一个配置文件

npx jsrepo init https://vue-bits.dev/ui

2. 从列表中浏览并添加组件

npx jsrepo add

3. 或者只添加一个特定的组件

npx jsrepo add Animations/AnimatedContainer

最新组件

Electric Border 电动边框

<template>
  <ElectricBorder
    :color="'#7df9ff'"
    :speed="1"
    :chaos="0.5"
    :thickness="2"
    :style="{ borderRadius: '16px' }"
  >
    <div>
      <p :style="{ margin: '6px 0 0', opacity: 0.8 }">
        A glowing, animated border wrapper.
      </p>
    </div>
  </ElectricBorder>
</template>

<script setup lang="ts">
import ElectricBorder from "./ElectricBorder.vue";
</script>

Target Cursor 目标光标

<template>
  <TargetCursor :spin-duration="2" :hide-default-cursor="true" />

  <h1>Hover over the elements below</h1>
  <button class="cursor-target">Click me!</button>
  <div class="cursor-target">Hover target</div>
</template>

<script setup lang="ts">
import TargetCursor from "./TargetCursor.vue";
</script>

Gradual Blur 渐变模糊

<script setup lang="ts">
import GradualBlur from "./GradualBlur.vue";
</script>

Prism 棱镜

<template>
  <div style="width: 100%; height: 600px; position: relative;">
    <Prism
      animation-type="rotate"
      :time-scale="0.5"
      :height="3.5"
      :base-width="5.5"
      :scale="3.6"
      :hue-shift="0"
      :color-frequency="1"
      :noise="0.5"
      :glow="1"
    />
  </div>
</template>

<script setup lang="ts">
import Prism from "./Prism.vue";
</script>

Pixel Blast 像素爆炸

<template>
  <div style="width: 100%; height: 600px; position: relative">
    <PixelBlast
      variant="circle"
      :pixel-size="6"
      color="#A7EF9E"
      :pattern-scale="3"
      :pattern-density="1.2"
      :pixel-size-jitter="0.5"
      :enable-ripples="true"
      :ripple-speed="0.4"
      :ripple-thickness="0.12"
      :ripple-intensity-scale="1.5"
      :liquid="true"
      :liquid-strength="0.12"
      :liquid-radius="1.2"
      :liquid-wobble-speed="5"
      :speed="0.6"
      :edge-fade="0.25"
      :transparent="true"
    />
  </div>
</template>

<script setup>
import PixelBlast from "./PixelBlast.vue";
</script>

Gradient Blinds 渐变百叶窗

<template>
  <div style="width: 100%; height: 600px; position: relative;">
    <GradientBlinds
      :gradient-colors="['#1EA03F', '#182FFF']"
      :angle="0"
      :noise="0.3"
      :blind-count="12"
      :blind-min-width="50"
      :spotlight-radius="0.5"
      :spotlight-softness="1"
      :spotlight-opacity="1"
      :mouse-dampening="0.15"
      :distort-amount="0"
      shine-direction="left"
      mix-blend-mode="lighten"
    />
  </div>
</template>

<script setup lang="ts">
import GradientBlinds from "./GradientBlinds.vue";
</script>

Prismatic Burst 棱镜爆裂

<template>
  <div style="width: 100%; height: 600px; position: relative;">
    <PrismaticBurst
      animationType="rotate3d"
      :intensity="2"
      :speed="0.5"
      :distort="1.0"
      :paused="false"
      :offset="{ x: 0, y: 0 }"
      :hoverDampness="0.25"
      :rayCount="24"
      mixBlendMode="lighten"
      :colors="['#ff007a', '#4d3dff', '#ffffff']"
    />
  </div>
</template>

<script setup lang="ts">
import PrismaticBurst from "./PrismaticBurst.vue";
</script>

Plasma 火山

<template>
  <div style="width: 100%; height: 600px; position: relative;">
    <Plasma
      color="#ff6b35"
      :speed="0.6"
      direction="forward"
      :scale="1.1"
      :opacity="0.8"
      :mouseInteractive="true"
    />
  </div>
</template>

<script setup lang="ts">
import Plasma from "./Plasma.vue";
</script>

Liquid Ether 液体以太

<template>
  <div style="width: 100%; height: 600px; position: relative">
    <LiquidEther
      :colors="['#48FF28', '#A2FFC6', '#9EF19E']"
      :mouseForce="20"
      :cursorSize="100"
      :isViscous="false"
      :viscous="30"
      :iterationsViscous="32"
      :iterationsPoisson="32"
      :resolution="0.5"
      :isBounce="false"
      :autoDemo="true"
      :autoSpeed="0.5"
      :autoIntensity="2.2"
      :takeoverDuration="0.25"
      :autoResumeDelay="3000"
      :autoRampDuration="0.6"
    />
  </div>
</template>

<script setup lang="ts">
import LiquidEther from "./LiquidEther.vue";
</script>

未来规划

Vue Bits 团队正在开发更多激动人心的功能：

即将发布

• AI 动效生成器：通过 AI 自动生成合适的动效
• 动效设计器：可视化动效编辑器
• 更多 3D 效果：WebGL 驱动的 3D 动效
• VR/AR 支持：虚拟现实动效组件

长期目标

• 成为 Vue 生态中最受欢迎的动效库
• 支持更多框架（Svelte、Solid 等）
• 建立动效设计标准

总结

Vue Bits 不仅仅是一个动效组件库，它代表了 Vue 3 生态在用户体验方面的重大突破。通过简单易用的 API、强大的性能和丰富的组件，Vue Bits 让每个 Vue 开发者都能轻松创建令人惊艳的用户界面。

为什么现在就要开始使用 Vue Bits？

1. 提升竞争力：在用户体验至上的时代，动效是必不可少的
2. 开发效率：减少 80% 的动效开发时间
3. 设计一致性：统一的动效标准，提升产品品质
4. 移动优先：完美适配各种设备
5. 未来趋势：动效交互是 Web 发展的必然方向

---

结语

Vue Bits 的到来，标志着 Vue 3 生态在动效领域的重要里程碑。无论你是 Vue 新手还是资深开发者，Vue Bits 都能为你的项目带来质的飞跃。

让我们一起拥抱动效的未来，用 Vue Bits 创造更美好的用户体验！

---

本文由 Vue Bits 官方团队授权发布，更多信息请访问 vue-bits.dev