mcpField
A
animation-performance-retro

animation-performance-retro

github.com/theorcdev设计与 UI2.1k81 次安装2 天前更新
代码仓库

关于 animation-performance-retro

animation-performance-retro 是一项设计技能，帮助像素艺术动画和游戏风格界面保持流畅。内容涵盖硬件加速、动画时序、加载状态和按状态触发的效果。

主要功能

  1. 01优先使用 transform 和 opacity 动画
  2. 02避免触发布局的属性
  3. 03将动画 SVG 放入 div
  4. 04像素艺术动效使用阶跃时序
  5. 05按界面状态控制效果

适用场景

  1. 01提升像素艺术界面的动画流畅度
  2. 02制作复古风格加载指示器
  3. 03根据 Radix UI 状态为覆盖层添加动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill animation-performance-retro

安装后在 Claude Code 中输入/animation-performance-retro确认已加载。

详细介绍

复古 UI 的动画性能

优化动画，让像素艺术渲染和游戏风格界面更流畅。

硬件加速

使用 CSS 变换实现 GPU 加速动画：

<div className="transition-transform hover:scale-110" />
<div className="translate-x-0 translate-y-0" />

避免为以下属性添加动画：

  • width、height（会触发布局）
  • margin、padding（会触发布局）
  • top、left（会触发布局）

优先为以下属性添加动画：

  • transform（GPU 加速）
  • opacity（GPU 加速）
  • filter（GPU 加速）
像素化动画

将动画 SVG 包装在 div 中，以实现硬件加速：

function PixelSpinner() {
  return (
    <div className="animate-spin">
      <svg viewBox="0 0 16 16">
        <rect x="2" y="2" width="4" height="4" fill="currentColor" />
      </svg>
    </div>
  );
}
加载状态

使用脉冲动画制作复古风格的加载指示器：

function RetroSkeleton() {
  return (
    <div className="relative animate-pulse">
      <div className="h-20 bg-muted" />
    </div>
  );
}
自定义复古动画

定义像素艺术专用动画：

<div
  className="retro animate-[blink_0.5s_step-end_infinite]"
  style={{
    textShadow: "1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff"
  }}
>
  LEVEL UP!
</div>

<style>{`
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
`}</style>
条件动画状态

根据游戏状态应用动画：

<div
  className={cn(
    "transition-all duration-300",
    health <= 25 && "animate-pulse bg-red-500/20",
    isLevelUp && "animate-bounce"
  )}
/>
Radix UI 动画

使用基于 Radix 状态的动画制作叠加层：

<DialogContent
  className={cn(
    "data-[state=open]:animate-in data-[state=closed]:animate-out",
    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
  )}
/>

<AccordionContent
  className={cn(
    "overflow-hidden data-[state=closed]:animate-accordion-up",
    "data-[state=open]:animate-accordion-down"
  )}
/>
核心原则
  1. 包装 SVG - 始终将 SVG 包装在 div 中，以实现硬件加速
  2. 使用变换 - 优先使用 transform，而不是 top/left
  3. 阶梯式动画 - 使用 step-end，营造像素艺术风格
  4. 条件类名 - 根据游戏状态应用动画
  5. 自定义关键帧 - 定义复古风格专用动画
  6. 文本阴影 - 在彩色背景上使用白色阴影，提升可读性
性能检查清单
  • 动画元素已包装在 div 中
  • 未为会触发布局的属性添加动画
  • 加载状态使用 animate-pulse
  • 条件动画已正确设置门控
  • 自定义动画使用阶梯式计时函数
参考组件
  • components/ui/8bit/spinner.tsx - 动画加载指示器
  • components/ui/8bit/xp-bar.tsx - 自定义闪烁动画
  • components/ui/8bit/skeleton.tsx - 加载骨架屏
  • components/ui/8bit/accordion.tsx - Radix 状态动画

评论

支持 Markdown