如何使用 shadcn/ui 构建一个可动画化的徽标组件

'use client'这一指令表明该组件属于 Next.js 应用程序路由器中的客户端组件。Motion 动画是在浏览器中执行的，而不是在服务器端，因此这个指令是必需的。

motion/react是用于导入 Motion v11 及更高版本的模块路径。如果你的项目使用的是较低版本，应该使用 framer-motion 这个导入路径。Variants 类型是 TypeScript 中的一种辅助类型，用于为带有名称的动画状态对象定义类型。

cn()是一个实用工具类，所有基于 shadcn/ui 开发的项目都会包含这个类。它可以将 Tailwind CSS 的样式与条件逻辑结合起来进行处理。

步骤 2：定义字母动画的变体

const LETTER_VARIANTS: Variants = {
  hidden: { y: -14, opacity: 0 },
  visible: (i: number) => ({
    y: 0,
    opacity: 1,
    transition: {
      delay: i * 0.038,
      duration: 0.35,
      ease: [0.215, 0.61, 0.355, 1],
    },
  }),
};

每个字母在开始时都会位于其最终位置的上面 14 像素处，并且是完全透明的。当组件被渲染到页面上时，这些字母会移动到 y: 0 的位置，并且透明度变为 1。

delay: i * 0.038 这个公式用于控制字母出现的顺序。字母 0 没有延迟，字母 1 等待 38 毫秒再出现，字母 2 等待 76 毫秒，依此类推。这样，字母们就会从左向右依次出现。

ease参数的值为 [0.215, 0.61, 0.355, 1]，表示动画效果为 easeOutCubic。这种效果意味着动画开始时速度较快，然后逐渐减速，从而使每个字母都有一个自然的过渡效果，而不会突然停止。

visible函数接受一个 custom 参数。当你在 motion.span 组件上使用 custom={i} 时，Motion 会使用这个索引值来调用 visible 函数。因此，每个字母都会根据自己的索引值来计算延迟时间。

无障碍提示：为了尊重那些不喜欢动画效果的用户，你可以从 motion/react 中导入 useReducedMotion 这个模块。当它返回 true 时，就可以忽略字母出现的延迟效果。

步骤 3：为 Badge 组件添加动画效果

const MotionBadge = motion.create(Badge);

来自 shadcn/ui 的 Badge 组件是一个标准的 React 组件。你不能直接给它应用像 animate 或 initial 这样的动画属性。

motion.create()这个函数可以用来包裹任何 React 组件，从而生成一个新的组件版本，这个新版本能够接受所有的 Motion 动画相关属性。最终得到的 MotionBadge 组件，其行为与原来的 Badge 完全相同，只不过现在它可以进行动画展示了。

每当您想要使用 Motion 来为自定义组件或第三方库组件添加动画效果时，都可以使用这种模式。

步骤 4：创建发光层

<motion.span
  aria-hidden
  animate={{ opacity: 0.55 }}
  transition={{ duration: 0.45 }}
  className="pointer-events-none absolute -top-2 left-[10%] right-[10%] h-4 blur bg-[radial-gradient(ellipse_80%_100%_at_50%_100%,rgba(45,212,191,0.95)_0%,transparent_70%)]"
/>
<motion.span
  aria-hidden
  animate={{ opacity: 0.75 }}
  transition{{{ duration: 0.45 }}
  className="pointer-events-none absolute -top-1 left-[22%] right-[22%] h-2 blur-sm bg-[radial-gradient(ellipse_70%_100%_at_50%_100%,rgba(45,212,191,0.85)_0%,transparent_70%)]"
/>
<motion.span
  aria-hidden
  animate={{ opacity: 0.9 }}
  transition{{{ duration: 0.45 }}
  className="pointer-events-none absolute top-0 left-[28%] right-[28%] h-px bg-[radial-gradient(ellipse_40%_50%_at_50%_50%,rgba(45,212,191,0.95)_0%,transparent_100%)]"
/>

这三个 `` 元素堆叠在徽章边框的上方。每个元素的宽度都比下面的元素窄，不透明度也更低：

)

最内层的元素高度仅为 1 像素（使用 `h-px`），且没有模糊效果。这样一来，徽章边框处的发光部分就能呈现出清晰、明亮的边缘；而外两层则负责营造出柔和的渐变效果。

这三层元素都添加了 `aria-hidden` 属性，因为它们纯粹是用于装饰目的的。屏幕阅读器会跳过这些元素。而 `MotionBadge` 上的 `overflow-visible` 类属性使得这些 `` 元素能够显示在组件边界之外而不会被裁剪掉。

步骤 5：为图标添加动画效果

<motion.span
  initial={{ scale: 0.35, opacity: 0, rotate: -25 }}
  animate={{ scale: 1, opacity: 1, rotate: 0 }}
  transition{{{ duration: 0.32, ease: [0.175, 0.885, 0.32, 1.275] }}
  className="flex h-4 w-4 shrink-0 items-center justify-center"
>
  <CheckCircle size={16} strokeWidth={2} className="text-teal-400" />
</motion.span>

这个图标的初始大小为原始大小的 35%，是不可见的，并且旋转了 25 度。在动画开始时，它会恢复到正常大小并且停止旋转。

`ease` 参数的值 `[0.175, 0.885, 0.32, 1.275]` 表示的是 `easeOutBack` 曲线。与 `easeOutCubic` 不同，这种曲线在到达目标值之前会稍微超过目标值，然后再迅速回到目标值。因此，图标看起来就像是“弹跳”到正确位置上的。虽然这种效果很微妙，但它能让图标显得更加生动、有质感。

在包装元素上应用shrink-0这个样式，可以防止图标在弹性容器内部被压缩。

步骤6：为每个字母添加动画效果

<span className="inline-flex overflow-hidden leading-none">
  {label.split("").map((char, i) => (
    <motion.span
      key={i}
      custom={i}
      variants={LETTER_VARIANTS}
      initial="hidden"
      animate="visible"
      className="inline-block whitespace-pre"
    >>
      {char}
    </motion/span>
  ))}
</span>

label.split("")这个操作会将"Success"拆分成["S", "u", "c", "c", "e", "s", "s"]。每个字符都会对应一个独立的motion.span》元素。

// app/page.tsx
import SuccessBadgeDemo from "@/components/shadcn-space/badge/badge-07";

export default function Page() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <>SuccessBadgeDemo />
    </div>
  );
}

'use client'
import { motion, type Variants } from "motion/react";
import { ShieldCheck } from "lucide-react";
import { Badge } from "@components/ui/badge";
import { cn } from "@lib/utils";

const LETTER_VARIANTS: Variants = {
  hidden: { y: -14, opacity: 0 },
  visible: (i: number) => ({
    y: 0,
    opacity: 1,
    transition: {
      delay: i * 0.038,
      duration: 0.35,
      ease: [0.215, 0.61, 0.355, 1],
    },
  }),
};

const MotionBadge = motion.create(Badge);

const VerifiedBadgeDemo = () => {
  const label = "Verified";

  return (
    <MotionBadge
      variant="outline"
      className={cn(
        "relative h-auto cursor-default overflow-visible rounded-full",
        "gap-2 px-3 py-2",
        "bg-background backdrop-blur-md",
        "text-foreground text-sm font-medium leading-none",
        "border-blue-400/25",
      )}
    >
      <motion.span aria-hidden animate={{ opacity: 0.55 }} transition={{ duration: 0.45 }}
        className="pointer-events-none absolute -top-2 left-[10%] right-[10%] h-4 blur bg-[radial-gradient(ellipse_80%_100%_at_50%_100%,rgba(96,165,250,0.95)_0%,transparent_70%)]"
      />
      <motion.span aria-hidden animate={{ opacity: 0.75 }} transition={{ duration: 0.45 }}
        className="pointer-events-none absolute -top-1 left-[22%] right-[22%] h-2 blur-sm bg-[radial-gradient(ellipse_70%_100%_at_50%_100%,rgba(96,165,250,0.85)_0%,transparent_70%)]"
      />
      <motion.span aria-hidden animate={{ opacity: 0.9 }} transition={{ duration: 0.45 }}
        className="pointer-events-none absolute top-0 left-[28%] right-[28%] h-px bg-[radial-gradient(ellipse_40%_50%_at_50%_50%,rgba(96,165,250,0.95)_0%,transparent_100%)]"
      />

      <motion.span
        initial={{ scale: 0.35, opacity: 0, rotate: -25 }}
        animate={{ scale: 1, opacity: 1, rotate: 0 }}
        transition={{ duration: 0.32, ease: [0.175, 0.885, 0.32, 1.275] }}
        className="flex h-4 w-4 shrink-0 items-center justify-center"
      >
        <ShieldCheck size={16} strokeWidth={2} className="text-blue-400" />
      
        {label.split("").map((char, i) => (
          
            {char}
          
        ))}
      
    
  );
};

export default VerifiedBadgeDemo;

delay: i * 0.06, // 显示间隔较慢
delay: i * 0.02, // 显示间隔较快