mcpField
R
rendering-animate-svg

rendering-animate-svg

github.com/theorcdev开发2.1k108 次安装2 天前更新
代码仓库

关于 rendering-animate-svg

rendering-animate-svg 是针对 8-bit 界面元素的动画编码规范，面向实现 SVG 动画的开发者。它建议动画应用于 SVG 外层元素，并涵盖变换和过渡效果。

主要功能

  1. 01动画应用于 SVG 外层元素
  2. 02涵盖 CSS 变换与过渡
  3. 03适用于像素风图标悬停效果

适用场景

  1. 01实现像素风加载动画
  2. 02为 8-bit 图标添加悬停动画

安装

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

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg

安装后在 Claude Code 中输入/rendering-animate-svg确认已加载。

详细介绍

使用动画包装器，而非 SVG 元素

许多浏览器不支持对 SVG 元素进行 CSS3 动画的硬件加速。请将 SVG 包裹在 <div> 中，并为包装器添加动画。对于带有像素艺术图标和动画的 8 位组件，这一点尤为重要。

错误（直接为 SVG 添加动画——不支持硬件加速）：

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

正确（为包装器 div 添加动画——支持硬件加速）：

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

适用于带有悬停效果的 8 位图标组件：

function RetroIcon({ icon: Icon, className }: RetroIconProps) {
  return (
    <div className={cn("transition-transform hover:scale-110", className)}>
      <Icon />
    </div>
  )
}

这适用于所有 CSS 变换和过渡（transform、opacity、translate、scale、rotate）。包装器 div 可让浏览器使用 GPU 加速，使动画更加流畅；在复古像素艺术动画中，这种效果尤为明显。

评论

支持 Markdown