Vue Bits - 免费开源、优雅高效的 Vue 3 动效组件库，大名鼎鼎的 React Bits 的官方移植版
国外爆火的 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 的核心优势在于其丰富多样的动画组件和高度优化的性能表现：
-
丰富的动画组件
：有超过 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 开源协议以及公共领域条件许可（即
评论