年后有些忙，好久没给大家带干货啦，这次给大家带来SVG集福卡的动画排版案例。

通过引导用户寻找隐藏在画面中的福字，来收集5张福卡，收集完成后会触发一段烟花GIF动画，你会发现这种形式可以有效地延长用户停留时间，增加图文的趣味性和交互性。

老规矩，我们先来看一下案例效果。

SVG集五福案例演示

点击触发动画

先是最基础的点击触发动画，点击下面5张福卡会触发通明度动画。

<g>
  <g>
    <foreignObject x="0" y="0">
      <!-- 福卡封面图 -->
      <svg viewBox="0 0 153 265"></svg>
    </foreignObject>
  </g>
  <g opacity="0">
    <foreignObject x="0" y="0">
      <!-- 福卡图 -->
      <svg viewBox="0 0 153 265"></svg>
    </foreignObject>
    <animate 
      attributeName="opacity" 
      values="0;1;1" 
      begin="click">
    </animate>
  </g>
</g>

错位触发动画

通过pointer-events属性，我们可以指定福卡动画触发的区域和位置，实现错位触发。

<g style="pointer-events:none">
  <g>
    <foreignObject x="0" y="0">
      <!-- 卡片封面图 -->
      <svg viewBox="0 0 153 265"></svg>
    </foreignObject>
  </g>
  <g opacity="0">
    <foreignObject x="0" y="0">
      <!-- 卡片图 -->
      <svg viewBox="0 0 153 265"></svg>
    </foreignObject>
    <!-- 矩形触发区域 -->
    <rect x="620" y="-590" style="pointer-events:visible;"></rect>
    <animate 
      attributeName="opacity" 
      values="0;1;1" 
      begin="click">
    </animate>
  </g>
</g>

用事件穿透触发显示烟花动画

利用click事件300ms的延迟，我们可以实现动画的双重触发。除了会触发福卡的显示动画，还会触发下一层动画让烟花GIF显示出来。

总结

本次案例用到了错位触发，事件穿透，双重触发等SVG动画排版技巧。

由于篇幅所限我会将烟花动画的制作放在视频教程中做详细演示，视频教程会收录在我的《SVG动画排版从入门到精通》的案例部分，里面会对案例的代码原理有更详尽的解释，强烈建议基础比较薄弱的同学去学习。

32_683_4512584aee1c12e6e1d6a7d6fed736f7_9fa3ebabf0e9a7c3246289f93f4f85fd

SVG动画排版从入门到精通
关注