走在 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/