巧用事件穿透同时播放声音和动画

事件穿透是在公众动画排版中常用的一种技术，用它可以制作出丰富有趣的多重触发交互效果，是有追求的公众号编辑人员需要掌握的技巧，它就好比是动画排版中的六脉神剑，让人屡试不爽。

老规矩先来举个栗子，这里我利用事件穿透实现了动画和声音同时播放的效果，注意点击事件只会在指纹区域触发，穿透到下一层处理。

实现事件穿透要使用pointer-events这个css属性，通常在前端开发中，我们利用这个属性来阻止某个元素触发事件，例如 :

<div style="pointer-events:none;">
  <span>点击我无效<span>
</div>

当元素设置了pointer-events: none，该元素不会响应任何事件，很多小伙伴理所当然地认为该元素的子元素也不会响应任何事件，这种假设是错误的。我们来看一下MDN网站上关于pointer-events属性的一段补充解释：

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。 

简而言之，当子元素的pointer-events属性值不是none的时候，仍然可以触发事件，究竟如何来实现呢？让我慢慢道来。

事件穿透原理

要实现事件穿透，我们要使用SVG结合pointer-events属性的方式，原因是pointer-events中的部分属性值只针对SVG元素起作用，其中属性值painted正是我们实现穿透效果的主角，我来看看MDN上对这个属性的解释:

painted属性值只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：
鼠标指针在元素内部，且fill属性指定了none之外的值
鼠标指针在元素边界上，且stroke属性指定了none之外的值 

用大白话说就是，svg元素中有填充的部分会响应事件，没有填充即镂空的部分不会响应事件，所以事件会穿透镂空区域传递到下层元素，这就是事件穿透的原理。

创建事件穿透SVG元素

如下图所示，首先我先在Adobe illustrator中创建了一个中间有圆形镂空的矢量矩形，圆形镂空的位置与首页图片中指纹位置相同。

然后导出SVG元素，在代码中将SVG元素置于最上层，并将其透明度设置为0，当用户点击镂空的圆形区域后，会触发下层的SVG事件播放声音和动画。

触发音乐和动画播放

事件穿透顶部的SVG后会到达下层，下层需要有对象接受事件并触发动画和音频的播放。这里我们用一个小技巧让微信音频播放器的按钮来帮我们触发动画和声音，简化后的代码结构如下。

<g opacity="0">
  <animate attributeName="opacity" begin="touchstart" dur="0.5s" values="0;1"></animate>
  <animateTransform attributeName="transform" type="translate" keyTimes="0;0.000001;1" values="0 0;-1000 0;-1000 0" begin="touchstart"></animateTransform>
  <g transform="matrix(1 0 0 1 1000 0)">
    <foreignObject>
      动画图片
    </foreignObject> 
  </g>
  <g>
    <foreignObject>
      <section style="opacity:0;transform: scale(4) translate(-8em, 0);pointer-events:painted;">
        微信音乐播放器代码
      </section>
    </foreignObject>
  </g>
</g>

我们先将动画图片向右移动1000像素隐藏起来，然后将微信的音频播放器按钮放大，位置大概和上层镂空圆形重合，这里不用太精确。事件穿透圆形区域后会首先到达音频播放按钮触发音频播放，然后又会触发父级的位移和透明度动画，将右边的动画图片显示出来。

要获取微信音频播放器代码，首先我们要在后台上传一段音频，并将其插入到文章中；通过chrome开发者工具查找到播放器代码，并代码拷贝到上面”微信播放器代码”的位置。

总结

基于pointer-events的事件穿透，可以实现点A现B的多重触发的互动效果，结合一些创意可以让你的图文更具吸引力。同学们如果有好的效果可以留言给我，行歌会帮大家剖析案例，学习更多有趣的排版知识，我们下次再见！