随着 SVG 的发展,艺术家和设计师们把越来越多传统设计行业的东西引入了前端, low poly 就是其中之一。那 low poly 强大在哪呢,大家通过下面的图来感受一下。
恰巧我们产品 Logo 也用了部分 low poly 的手法,下面是我做的 demo 。
https://jsfiddle.net/windwhinny/j4997b3a
现在制作 low poly 最好的方法,就是手绘,虽然有一些工具可以将普通图片制作成 low poly,但效果往往都不怎么理想。设计师手绘可以保证图片突出的内容(比如眼睛)可以得到精细的绘制,这点计算机是很难把握的。但手绘的时候尤其要小心,三角形的顶点要对齐。
制作成 svg 之后,在使用的时候要注意,三角形之间是会有缝隙的,尽量放在同一色系的背景之上,这样会显得不明显。
动画的原理蛮简单的,就是把元素按照一定的顺序做放大/缩小的动画,动画的 time function 可以参考我之前的一篇文章 新时代前端必备神器 Snap.svg 之弹动效果,然后每个元素动画之间延迟个零点几秒就行了。
再然后就是性能问题了,对于移动产品来说,这个量级的动画肯定是有些吃力的。而对于桌面浏览器来说,也不适合放在 DOM 复杂的页面里,宣传页之类的页面倒是比较合适。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。