《SVG 不挨踢》第 4 集：让图标动起来——动画比 PPT 简单

本期目标：还是记事本，零 JS，让上集的彩虹笑脸心跳起来！甲方看完只说俩字：“加钱！”

1. 先灌鸡汤：静态只能骗 20 赞，动起来才能骗 50 赞

上集的彩虹笑脸已经很闪，但它不会动。
在老板眼里，不会动 = 没灵魂 = 不给钱。
行，给它一颗 蹦迪的心。

2. 核心武器：<animateTransform>

SVG 自带标签，专治“缩放/旋转/位移”三大懒癌。
语法比 PPT 还傻瓜：

<animateTransform
  attributeName="transform"
  type="scale"
  values="1;1.2;1"
  dur="0.6s"
  repeatCount="indefinite"/>

人话翻译：

• type="scale" → 缩放
• values="1;1.2;1" → 一倍 → 1.2 倍 → 一倍，完成一次心跳
• dur="0.6s" → 一次 0.6 秒
• repeatCount="indefinite" → 无限循环，直到地老天荒

3. 五步实操——心跳笑脸

打开记事本，新建 heartbeat.svg：

<svg viewBox="0 0 100 100">
  <!-- 1. 彩虹渐变 -->
  <defs>
    <linearGradient id="rainbow" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%"  stop-color="#ff00ff"/>
      <stop offset="100%"stop-color="#00ffff"/>
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- 2. 笑脸组合 -->
  <g id="smiley">
    <circle cx="50" cy="50" r="40" fill="url(#rainbow)" filter="url(#glow)"/>
    <circle cx="35" cy="40" r="5"/>
    <circle cx="65" cy="40" r="5"/>
    <path d="M30,60 Q50,75 70,60"
          stroke="#000" fill="none" stroke-width="5" stroke-linecap="round"/>
  </g>

  <!-- 3. 心跳动画 -->
  <animateTransform xlink:href="#smiley"
    attributeName="transform"
    type="scale"
    values="1;1.15;1"
    dur="0.8s"
    repeatCount="indefinite"/>
</svg>

保存 → 双击 → 整个笑脸有节奏地放大缩小，像蹦迪一样闪。

4. 动画参数速查表

5. 旋转彩蛋——让星星转起来

把上集五角星拿来，加一行：

<animateTransform
  attributeName="transform"
  type="rotate"
  values="0 50 50;360 50 50"
  dur="3s"
  repeatCount="indefinite"/>

解释：

• values="0 50 50;360 50 50" → 绕 (50,50) 中心点 0°→360°
• dur="3s" → 3 秒转一圈，佛系养生转速

6. 组合技——缩放 + 旋转一起上

SVG 允许你叠两个动画，只要写两个 <animateTransform>，会自动叠加：

<g>
  <animateTransform attributeName="transform" type="scale" ... />
  <animateTransform attributeName="transform" type="rotate" ... />
</g>

效果：边心跳边旋转，甲方看完只会说——“太炫，预算翻倍！”

7. 立刻装×——3 种发圈姿势

1. “心跳 Logo”
   把公司图标套个 scale 动画，发给老板：
   “品牌会呼吸，用户更心动。”
2. “旋转二维码”
   先别急，第 10 集才教，先留个彩蛋。
3. “表白神器”
   把心跳爱心发过去，配文：
   “代码会循环，我对你的喜欢也是。”
   成功率 +50%，翻车率自负。

8. 课后作业（任选）

A. 把笑脸 dur 从 0.8s 改成 0.4s，心跳加速版。
B. 给星星再加 scale 动画，实现边转边放大缩小。
截图回帖，我抽 5 人送「第 5 集文字打字机效果源码」。

9. 下集预告

第 5 集《文字也能玩：打字机效果》
不用 JS，让句子一个个字母往外蹦，像黑客电影那么酷。
想继续？评论区敲 1，我连夜把字母塞进你的记事本！