走在 SVG + Low Poly 的路上

时允

随着 SVG 的发展,艺术家和设计师们把越来越多传统设计行业的东西引入了前端, low poly 就是其中之一。那 low poly 强大在哪呢,大家通过下面的图来感受一下。

图片描述

恰巧我们产品 Logo 也用了部分 low poly 的手法,下面是我做的 demo 。

https://jsfiddle.net/windwhinny/j4997b3a

现在制作 low poly 最好的方法,就是手绘,虽然有一些工具可以将普通图片制作成 low poly,但效果往往都不怎么理想。设计师手绘可以保证图片突出的内容(比如眼睛)可以得到精细的绘制,这点计算机是很难把握的。但手绘的时候尤其要小心,三角形的顶点要对齐。

制作成 svg 之后,在使用的时候要注意,三角形之间是会有缝隙的,尽量放在同一色系的背景之上,这样会显得不明显。

动画的原理蛮简单的,就是把元素按照一定的顺序做放大/缩小的动画,动画的 time function 可以参考我之前的一篇文章 新时代前端必备神器 Snap.svg 之弹动效果,然后每个元素动画之间延迟个零点几秒就行了。

再然后就是性能问题了,对于移动产品来说,这个量级的动画肯定是有些吃力的。而对于桌面浏览器来说,也不适合放在 DOM 复杂的页面里,宣传页之类的页面倒是比较合适。

文章内容来自 https://css-tricks.com/polylion/

阅读 3.6k

美团成都部门招聘 RD,有意者联系我

4.9k 声望
112 粉丝
0 条评论

美团成都部门招聘 RD,有意者联系我

4.9k 声望
112 粉丝
宣传栏