转眼就快到年底了，各大广告主都在策划圣诞和新年的营销活动，这时在公众号图文中最常见就是抽签，盲盒等随机图文效果。

这次我们用一个新年签的案例，带领大家彻底弄懂随机图文的实现原理。

相信通过这篇教程再结合自己的创意，你一定能做出更有趣的随机图文效果！

新年签案例

SVG随机图文原理

说了你也许会惊讶，要实现这种随机图文效果其实很简单，简单到只要用一个animateTransform标签就能搞定。

假设我们有4张新年签的图片，我们用帧模式快速的移动这4张图片，产生序列帧的效果。

当用户点击的时候，立刻暂定序列帧的播放，这时候动画会停止在用户点击时那帧图片，达到了随机抽签的效果。

代码实现很简单，注意这里要设置动画的calcMode模式为帧模式discrete，并设置动画在用户点击时停止end=”click”。

<g>
  <g>
    <foreignObject x="0" y="0">
      <!-- 图片1 -->
    </foreignObject>
  </g>
  <g>
    <foreignObject x="1000" y="0">
      <!-- 图片2 -->
    </foreignObject>
  </g>
  <g>
    <foreignObject x="2000" y="0">
      <!-- 图片3 -->
    </foreignObject>
  </g>
  <g>
    <foreignObject x="3000" y="0">
      <!-- 图片4 -->
    </foreignObject>
  </g>
  <animateTransform 
    attributeName="transform" 
    type="translate" 
    values="0 0;-1000 0;-2000 0;-3000 0;0 0" 
    calcMode="discrete" 
    fill="freeze" 
    repeatCount="indefinite" 
    dur="0.3s" 
    end="click">
  </animateTransform>
<g>

用事件穿透做双重触发

作为额外的福利，在这里我们讲一下事件双重触发的小技巧。

在我们的新年签案例中，当用户点击“抽一签”按钮时，触发了两组事件。

第一组事件触发了抽签动画，第二组事件使隐藏在后面的随机图文停止播放。

事件穿透双重触发

当touchstart事件触发时马上移除触发区域，利用click事件在移动设备上的300ms延迟，穿透到下面一层触发随机图文层的click事件。

<g>
  <!-- 随机图文 -->
  <g>
    <animateTransform 
    attributeName="transform" 
    type="translate" 
    values="0 0;-1000 0;-2000 0;-3000 0;0 0" 
    calcMode="discrete" 
    fill="freeze" 
    repeatCount="indefinite"
    dur="0.1s" 
    end="click">
    </animateTransform>
  </g>
  <!-- 抽签动画 -->
  <g>
    <animateTransform 
      attributeName="transform" 
      type="rotate" values="-15;0;10;0;-15" 
      keyTimes="0;0.2;0.6;0.9;1"
      calcMode="spline"
        keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0 0 1 1" 
        dur="1s" 
        repeatCount="3" 
        fill="remove" 
        restart="never" 
        begin="touchstart" 
        additive="sum">
      </animateTransform>
  </g>
</g>

总结

随机图文的原理是不是很简单！现在抽签和盲盒这些效果对你来说已经是小菜一碟，快去试试吧！

关注