原神任意元素转换大法（误
标题党勿怪 ε=ε=ε=┌(； ・＿・)┘ svg形变动画以前有翻译过一篇文章（https://my.oschina.net/codingDog/blog/2054879），不过那里的动画实现方式是 SMIL 和 css，两者的兼容性和局限性都不小，前者需要你有一定的设计能力，使用相同的锚点数来对图形进行转换，而且有被新标准废弃的趋势，后者有前面的所有缺点，唯二的优势是写起来清晰简洁，而且正在被浏览器逐步支持。 所以这次，我就用了一个在flash时代就鼎鼎大名的前端动画框架——GSAP。gsap提供了动画时间轴的基地，核心的实现是它的一个非常强大的收费插件：MorphSVGPlugin。相较于SMIL和css，它的优势非常明显： ① 可以在不同的形状之间做形变动画，因为插件对所有形状自己实现了一套转化为path路径的算法 ② 可以无视两个形状之间的锚点数，插件会自动补足 ③ 更平滑的转场，不需要来事先设计锚点位置，插件会自动计算出相邻的锚点来进行形变 ④ 只要浏览器支持svg即可创建动画，因为插件只是不停地修改属性值，并没有用到新标准的api。 ok，打完免费广告，代码量不大，直接放出...
