简单探索微信公众号动画交互实现

前几天朋友公众号要发文章，问我微信官方的文章为啥可以加这么炫酷的动画，而且还能做到点击触发动画《微信刷掌，开“门”！》（慎点，耗流量 90M+），这是咋做到的？

我一看也很纳闷，不是不给用 JavaScript 的吗，这咋回事啊？浏览器打开网页，直接右键查看源码，好家伙，原来用的是 SVG 实现的
source

两个动画，一个呼吸效果的按钮，一个整体动画，也都很平铺直叙，呼吸效果的动画是 1.4s 执行一个周期来修改透明度模拟，整体动画其实是在不断的切换图片，并不是真正的动画，而是用图片切换来模拟，所以这里其实整整下载了 80MB+ 的图片资源。
btn

然后是重头戏事件上，众所周知微信公众号限制不允许执行 script，甚至 style 标签也不支持使用，那么这里是故意留的门还是忘记了过滤后来也就没关了？

begin=“click” 声明了在点击的时候触发动画的执行，然后把捕获事件的 rect 元素挪到别的地方去，其实不挪也行，估计可能是一个通用配置的东西吧
source

这里事件捕获其实没太理解，为什么 rect 捕获的事件 animateTransform 也可以执行，但是移除 rect 元素后就没法捕获事件了，只能猜测是一个组内有任意捕获事件的元素，那么捕获后会广播到所有地方，目前没找到相关的说明文档。

如果用 CSS 来实现这两个动画也很简单，就是第二个动画也可以考虑下用 JavaScript 来切换，因为单单罗列其实也占用了不少空间，或者用 SASS 循环搞避免源码中太多代码。

@keyframes btnAnimation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes cardAnimation {
  0.007% { transform: translateX(0); }
  0.014% { transform: translateX(-2000); }
  /* ... */
  100% { transform: translateX(270000);  }
}

SVG 也可以玩一些 CSS 动画做不了的事情，比如 linear-gradient 的动画，只能通过修改 background-size 来实现变幻的效果，但是 SVG 就丰富多了，可以修改颜色，也可以修改角度。

以前比较少用 SVG，最多用用 icon，现在看来 SVG 也可以拿来做一些有趣的东西。