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

2018-02-07 11:22:09 浏览数 (1)

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会形成降维般的打击,二边的人都比不了他呀。

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

0 人点赞