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

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

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-08-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

谷歌分享注视点渲染技术的新研究成果

显示器分辨率在不断提高,但图形处理能力并没有以同样的速度提升。注视点渲染技术通常被认为是下一代头显必备的能力,该技术能够让头显降低对显卡渲染的要求,显卡会集中渲...

24500
来自专栏媒矿工厂

AI如何用于现场直播场景

与许多产业一样,通过软件和算法辅助,电视与视频制作很可能被人工智能和机器学习所改造,而当前这些制作任务都是由人来执行。随着现场直播报道涉及的范围越来越广,而相关...

43530
来自专栏无原型不设计

巧用渐变色打造精致移动端APP

渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色。在扁平化设计刚刚兴起时,渐变是设计师们避之...

43150
来自专栏钱塘大数据

可视化数据图表要怎么做才好看?

作者:整理自网络 可视化技术仿佛有一种化平凡为非凡的魔力,冷冰冰的数据,经过可视化技术的加工,便酒曲入瓮般幻化成视觉的盛宴,炫酷的、缤纷的、简约的、繁复的……数...

40870
来自专栏深度学习入门与实践

Jaccard相似度在竞品分析中的应用

  上个月对一个小项目的效果进行改进,时间紧,只有不到一周的时间,所以思考了一下就用了最简单的方法来做,效果针对上一版提升了5%左右,跟大家分享一下(项目场景用...

29750
来自专栏逍遥剑客的游戏开发

GDC2017: 《Lone Echo》中的VR动画

35640
来自专栏CDA数据分析师

读图读什么——数据分析图表解密!

“字不如表,表不如图”,这八字诀在数据分析工作者眼中被视为秘籍,各种 数据分析图表,各种“忽悠”,数据会说谎,统计会撒谎,图表也会骗人。现在信息可视化如此流行,...

28490
来自专栏程序员叨叨叨

1.4 本书主要内容和结构

本书旨在引导初级 GPU 学习者步入 GPU 编程的大堂,并普及一些在国内资料中较少见到的 GPU 算法,例如光照渲染中的 bank BRDF,以及体绘制中的光...

10420
来自专栏智能算法

把照片滤镜成“电影风”,其实没你想象的简单

P过许多张图片、磨过不少皮,却依然不了解其中的奥秘。趁着刚被一波滤镜刷屏的节奏,今天,我们扒一扒“滤镜”。 化腐朽为神奇的滤镜 ? 《你的名字》剧照 美仑美焕的...

50650
来自专栏DT数据侠

有了游戏级渲染技术加持,数据可视化竟能如此炫酷 !

如果你喜欢玩游戏,一定被某些游戏中的画面渲染效果惊艳过,如果把这些游戏级的渲染技术应用到数据的可视化中,又会发生什么呢?在7月15日第15期数据侠实验室活动中,...

11500

扫码关注云+社区

领取腾讯云代金券