复古动画性能优化Skill animation-performance-retro

---

name: 动画性能优化-复古风格 description: 优化8位动画以实现流畅性能。在创建动画像素艺术、游戏UI效果或任何复古风格动画时应用。

复古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"
  }}
>
  升级！
</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 - 总是包装在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状态动画