渐变动画

详细介绍SVG渐变动画的实现方法，包括CSS动画、SMIL动画和JavaScript动画。通过实例掌握渐变动画的各种应用技巧。 渐变动画可以为SVG图形添加动态效果，使界面更加生动有趣。

CSS动画渐变

通过CSS动画改变渐变属性，实现动态效果。

渐变流动

<defs>
  <linearGradient id="flow-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db">
      <animate attributeName="stop-color" values="#3498db;#e74c3c;#2ecc71;#3498db" dur="3s" repeatCount="indefinite"/>
    </stop>
    <stop offset="100%" stop-color="#e74c3c">
      <animate attributeName="stop-color" values="#e74c3c;#2ecc71;#3498db;#e74c3c" dur="3s" repeatCount="indefinite"/>
    </stop>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="50" fill="url(#flow-grad)"/>

渐变位置动画

<defs>
  <linearGradient id="pos-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db"/>
    <stop offset="50%" stop-color="#e74c3c">
      <animate attributeName="offset" values="0.5;0.8;0.5;0.2;0.5" dur="4s" repeatCount="indefinite"/>
    </stop>
    <stop offset="100%" stop-color="#2ecc71"/>
  </linearGradient>
</defs>
<rect x="30" y="20" width="240" height="50" fill="url(#pos-grad)"/>

透明度脉冲

<defs>
  <radialGradient id="pulse-grad" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#e74c3c" stop-opacity="1">
      <animate attributeName="stop-opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
    </stop>
    <stop offset="100%" stop-color="#e74c3c" stop-opacity="0"/>
  </radialGradient>
</defs>
<rect x="30" y="20" width="240" height="50" fill="url(#pulse-grad)"/>

CSS @keyframes动画

使用CSS关键帧动画控制渐变效果。

<style>
  .gradient-animate {
    animation: gradient-shift 3s ease infinite;
  }
  @keyframes gradient-shift {
    0% { fill: #3498db; }
    33% { fill: #e74c3c; }
    66% { fill: #2ecc71; }
    100% { fill: #3498db; }
  }
</style>
<rect x="30" y="20" width="240" height="50" class="gradient-animate"/>

实际应用

加载指示器

<defs>
  <linearGradient id="loading-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ecf0f1"/>
    <stop offset="50%" stop-color="#3498db">
      <animate attributeName="offset" values="-0.5;1.5" dur="1.5s" repeatCount="indefinite"/>
    </stop>
    <stop offset="50%" stop-color="#ecf0f1"/>
  </linearGradient>
</defs>
<rect x="30" y="40" width="240" height="20" fill="url(#loading-grad)" rx="10"/>

呼吸效果

<defs>
  <radialGradient id="breath-grad" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#3498db">
      <animate attributeName="stop-color" values="#3498db;#2980b9;#3498db" dur="2s" repeatCount="indefinite"/>
    </stop>
    <stop offset="100%" stop-color="#ecf0f1"/>
  </radialGradient>
</defs>
<circle cx="150" cy="50" r="35" fill="url(#breath-grad)"/>

进度动画

<defs>
  <linearGradient id="progress-anim-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#2ecc71"/>
    <stop offset="50%" stop-color="#27ae60"/>
    <stop offset="100%" stop-color="#2ecc71"/>
  </linearGradient>
</defs>
<rect x="30" y="40" width="240" height="20" fill="#ecf0f1" rx="10"/>
<rect x="30" y="40" width="0" height="20" fill="url(#progress-anim-grad)" rx="10">
  <animate attributeName="width" values="0;240;0" dur="4s" repeatCount="indefinite"/>
</rect>

霓虹效果

<defs>
  <linearGradient id="neon-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#e74c3c">
      <animate attributeName="stop-color" values="#e74c3c;#f39c12;#e74c3c" dur="1s" repeatCount="indefinite"/>
    </stop>
    <stop offset="100%" stop-color="#f39c12">
      <animate attributeName="stop-color" values="#f39c12;#e74c3c;#f39c12" dur="1s" repeatCount="indefinite"/>
    </stop>
  </linearGradient>
</defs>
<text x="150" y="65" text-anchor="middle" font-size="28" font-weight="bold" fill="url(#neon-grad)">NEON</text>

动画属性