摘要：国外爆火的 React UI 动效组件库 React Bits 的 Vue 3 官方移植版，可以快速实现优雅的按钮交互或是复杂的 3D 效果。
国外爆火的 React UI 动效组件库 React Bits 的 Vue 3 官方移植版，可以快速实现优雅的按钮交互或是复杂的 3D 效果。
在介绍 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 页面中使用，实现了一个带动画效果的登录按钮：
立即登录实现火爆视频的彩色墨水喷溅的光标效果 Splash Cursor
彩墨喷溅效果
鼠标在这上面晃和点击看效果鼠标所到之处拖出彩色墨渍，像水波一样扩散，逼格瞬间提高几十倍。
Text Scramble 文字效果
终端文字效果
免费开源说明Vue Bits - 免费开源、优雅高效的 Vue 3 动效组件库，大名鼎鼎的 React Bits 的官方移植版｜那些免费的砖
来源：阿康聊科技