一个好玩的东西，从clip path polygon 动画看前端的多方向性

clip path，话说这个东西是css3中的新特性，它可以遮罩许多形状，圆的、方的、扁的都可以，还有多边形(polygon)，这个polygon最是有趣。

因为clip path的前身是svg，所以它支持的是二维坐标。polygon根据多组二维坐标的点，连接成线最后形成图案。

为什么今天突然要提到clip path polygon呢？因为今天群里有一个同学提到了一个网站，

就是这个，《30个濒危动物》的网站。当时我第一眼的感觉就是canvas或是svg，然后习惯的F12打开控制台，发现全是div，没有那些svg的path什么的节点。当时就有点发蒙，这怎么做的？svg呢？。。。

然后就有个同学告诉我说，是clip path polygon。

刚才说过了，polygon根据多组二维坐标连线画图，那么它的polygon animate动画，就是两套或是更多套的二维坐标组的补间动画。就是这样式的，

本来想搞个五角星，但变化巨丑，说明个意思而已。

clip path polygon它的动画的限制之一吧，就是用来变化的多套二维坐标的点的数量，必须要一致。其它的嘛，貌似也没什么了，就是标点连线。如果都用纯手工来做，那工作量真是巨大了。

但你看工作量巨大吧，还真有人手工做了，是谁呢？就是咱们群里的那个谁,"yaavi"，一个做设计的同学。

下面几个是他做的当时的截图，他搞的是30个建筑的clip path polygon动画，

这截图上面那么多三角性的点，坐标，看他的样式都是手工搞的，工作量很大的。

clip path polygon本身没什么复杂的，但要把它做出花儿来，并不容易。首先就是图片分形，无论多么复杂的图片，都可以用三角形来切分，再往下说那就是计算机图形学的范围了。

按我个人的思路吧，我觉得clip path polygon 动画，应该是先解决生成三角形，然后获得每个三角形的坐标，生成数组，然后开始animate变化呗。哎，我这都是面向过程的思路了，就是说说而已。

那既然说到这了，就再往下说说。

以我当前浅薄的知识来理解，我个人主观觉得，clip path polygon 动画应该算是，低多边形（Low Poly）的动画。

<!-- 以下资料来源于网页，感谢作者 -->

网上有这么一段介绍：“Low Poly是一种复古未来派风格设计（它本身也可以称之为新唯美设计The New Aesthetic)，又回到过去，又回到未来，在摇摆不定中寻找美学的平衡。繁荣发展的数字艺术，经历了一代又一代对“逼真”风格的无限追求，可他们永远无法做到逼真，因为他们进行的是模拟，此时，有人厌倦了模拟，他们开始追求抽象化的表达。”

就这样的，

所以前端开发吧，它的方向很多。

往后，可以写逻辑，只写纯逻辑，不碰页面；css兼容什么的都扔给别人做；再往后还有nodeJs可以搞；往前，可以写视觉效果、可视化、大数据展示、艺术与动画设计。

用js写动画，在以前是一个不太好笑的笑话，因为以前js本身效率不高，它操作dom的动画更是慢。后来，有了canvas，有了svg，有了css3，有了硬件加速。dom还是那个dom，js却再也不是那个js了，css也不是那个css了，浏览器也进化的棒棒的，更别提还有各种移动端，手持设备，触摸屏。

有时我觉得，如果一个设计很ok的人，但同时会写js，那他会很牛b，因为此时的他，可以自己出“产品”了。这时他对其它的前端js或是设计UI会形成降维般的打击，二边的人都比不了他呀。

所以前端开发吧，它的方向很多，不要觉得它只是搞页面的，不是这样的。