国外爆火的 React UI 动效组件库 React Bits 的 Vue 3 官方移植版，可以快速实现优雅的按钮交互或是复杂的 3D 效果。

Vue Bits 介绍

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

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

Vue Bits 官网截图

技术特性

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

• 丰富的动画组件：有超过 80 个精心设计的动画组件，涵盖按钮、菜单、卡片、文本效果等多个类别，动画效果优雅惊艳，可以满足各种场景需求；
• 双主题支持：所有组件都支持 CSS 和 Tailwind 一键切换，可以适应不同的开发偏好和项目配置；
• TypeScript 支持：直接完全由 TypeScript 开发；
• 性能优化：这些动画组件都经过优化，减少不必要的 DOM 操作和重绘，才让动画如此优雅流畅；
• 响应式设计：所有组件都支持响应式特性，在电脑、手机或者平板设备上都是一样的表现。

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

开发上手使用

安装和使用

Vue Bits 是用 jsrepo CLI 工具进行安装和管理，我也是第一次用这个工具，首先全局安装管理工具：

npm i -g jsrepo

然后就可以拉取任意组件，例如我需要一个渐变按钮组件：

npx jsrepo add vue-bits/components/GradientButton

然后就可以在 Vue 页面中使用，实现了一个带动画效果的登录按钮：

<template>
  <GradientButton colorFrom="#ff9920" colorTo="#7928ca">
    立即登录
  </GradientButton>
</template>

<script setup>
import GradientButton from 'vue-bits/components/GradientButton';
</script>

酷炫动画效果

实现火爆视频的彩色墨水喷溅的光标效果 Splash Cursor

彩墨喷溅效果

<template>
  <SplashCursor>
    <div class=“main-container”>鼠标在这上面晃和点击看效果</div>
  </SplashCursor>
</template>

<script setup>
import SplashCursor from 'vue-bits/components/SplashCursor';
</script>

鼠标所到之处拖出彩色墨渍，像水波一样扩散，逼格瞬间提高几十倍。

Text Scramble 文字效果

<template>
  <TextScramble 
    :text="message" 
    :speed="0.5" 
    @completed="onTextComplete" 
  />
</template>

<script setup>
import TextScramble from 'vue-bits/components/TextScramble';
import { ref } from 'vue';

const message = ref('队长，是我，别开枪！');
const onTextComplete = () => {
  console.log('监听文字动画已完成');
};
</script>

终端文字效果

这个动画会让文字像黑客终端一样快速随机排列，最后定格为显示的文案，效果非常炸裂。

免费开源说明

Vue Bits 是一个免费开源的 JS 动画库，项目采用 MIT 开源协议以及公共领域条件许可（即 Commons Clause License Condition v1.0）双许可，MIT 非常宽松，而公共领域条件许可也是可以用于商业项目的，但不能把 Vue Bits 拿来出售、重新许可为别的协议或这重新发布为别的项目。

↓↓点击查看本次分享的网站。

Vue Bits - 免费开源、优雅高效的 Vue 3 动效组件库，大名鼎鼎的 React Bits 的官方移植版｜那些免费的砖