UI設計師福利之CSS3實現的任意圖片lowpoly動畫效果

時間 2019-11-17

標籤設計師 css3 css 實現任意圖片 lowpoly 動畫效果欄目 CSS 简体版

原文原文鏈接

這是一個利用CSS3的動畫屬性實現的結合lowpoly（低多邊形風格）的效果，主要利用了CSS3 transform屬性的rotate旋轉，translate移動，scale縮放，CSS代碼部分很是簡單，惟一有趣的是 nth-of-type選擇器的使用，這裏UI設計師小夥伴不用望而卻步，CSS部分徹底能夠拿來複用並根據本身的要求隨意改變參數（全部不能複用的SVG動畫代碼都是耍流氓），而後，UI設計師再搭配上本身熟悉的AI利器，就能夠完美的實現下面的效果了。css

分步驟拆解：

1. 低多邊形風格的圖片的製做

個人原圖是下面這種：html

隨手從電腦上找了一張背景圖，而後藉助一個神器 Image Triangulator，不得不感慨，這個工具真是太好用了，各位設計師須要作的只是在圖片上打點（我是爲了測試，很粗糙的添加了頂點，若是須要獲得很出彩的效果，須要在明暗分隔的邊緣精細添加）。

而後導出的pdf格式的文件，就能夠用AI打開了。前端

2. 圖片的處理

這裏在AI裏須要一步重要的操做，「釋放剪切蒙版」，若是不進行這步操做，生成的SVG代碼裏會有大量的路徑裁剪遮罩標籤<clipPath>以及polygon的clip-path屬性。css3

釋放剪切路徑後選中圖形就能夠看到此時圖片已經由一個個三角形色塊組成了。
導出SVG代碼能夠看到密密麻麻的多邊形標籤 <polygon fill="" points=""/>。

Image Triangulator生成lowpoly風格的圖片；AI處理，釋放剪切蒙版bash

此處需注意，這個軟件生成的PDF是帶未處理的底圖的，SVG文件裏有<img>標籤，因此邊緣那裏能夠多加幾個點，或者截取掉一部分，防止邊緣出現鏤空。svg

3. 在線生成的低多邊形背景圖片的處理

若是須要的僅是一個背景圖，建議使用網站qrohlf.com/trianglify-… ，能夠自定義尺寸、顏色和晶格大小，支持生成SVG格式。好比下面這種：函數

利用這個在線工具生成的圖片不處理的話裏面會是<path>路徑標籤，而且有描邊屬性，須要在AI裏處理一下，全選，去掉全部的描邊屬性。此時，再導出的SVG文件就是對應的多邊形標籤<polygon>了。
截止到這一步，咱們的圖形處理部分就已經結束了，剩下的是動畫效果的實現工具

4. CSS3動畫

先說一下動畫實現的初步設想。我但願這些已經生成的多邊形碎片進行旋轉、位移和尺寸的變化，這對CSS來講，也是很容易實現的一個效果，但我須要的是散佈的不一樣效果，位移的方向不一樣，距離不一樣，縮放不一樣，可我這種JavaScript渣渣又不會寫隨機函數，還好CSS3提供了一個強大的選擇器nth-of-type(an+b)，利用它，我能夠賦予不一樣的多邊形碎片不一樣的動畫屬性值。
簡單瞭解一下nth-of-type(an+b)，n從0開始取值，依次加1，因此你會獲得第a+b個，2a+b個，3a+b個……元素。
好比，我但願個人<polygon>多邊形分紅6組，每組設定不一樣的動畫屬性，個人寫法以下：測試

polygon:nth-of-type(6n+1){transform: translate(x , y) scale() rotate();}複製代碼

這是順序爲6n+1（即1,7,13,19……）的多邊形的動畫效果，同理，下一組爲polygon:nth-of-type(6n+2)，即選擇了第2,8,14,20……個多邊形，依次向後推，直到polygon:nth-of-type(6n+6)
如今附上所有的代碼及註釋
結合下面的所有代碼說一下：動畫

<html>
<head>
<style>
/*如下爲可複用的CSS代碼部分*/
.cover{
position: absolute;
width: 800px;   
height: 445px;  
top: 20%;
left: 20%;
z-index: 2;
}
/*cover和svg的寬高位置都重合，惟一不一樣的是z-index屬性*/
svg {
position: absolute;
width: 800px;   
height: 445px;      
top: 20%;
left: 20%;
overflow: visible;
z-index: 1;
}
polygon{
transition:all 1s ease;
transform-origin: 50% 50%;           
}
/*如下爲設定的6組動畫效果*/
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+1){
transform: translate(-400% , -400%) scale(1.5) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+2){
transform: translate(800% , -400%) scale(1.1) rotate(200deg);
opacity: .4;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+3){
transform: translate(-800% , 400%) scale(1.2) rotate(200deg);
opacity: .3;
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+4){
transform: translate(-400% , 800%) scale(1.4) rotate(200deg);
opacity: .4
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+5){
transform: translate(400% , 400%) scale(1.3) rotate(100deg);
opacity: .3
}
.cover:hover + svg #lowpoly polygon:nth-of-type(6n+6){
transform: translate(800% , 400%) scale(1.2) rotate(200deg);
opacity: .3
}
</style></head>
<body><div class="cover"></div><!--定義的觸發區域-->
<svg>
<g id="lowpoly">
……此處爲若干<polygon>標籤 即須要自行替換的部分
</g>
</svg></body></html>複製代碼

因爲SVG在執行動畫效果後碎成滿屏，若是咱們的動畫要設置成鼠標移入破碎，鼠標移出復原的效果，須要一個區域來進行動做的觸發，這就是咱們定義cover的意義，且層級屬性要高於SVG屬性。

關於動畫效果的觸發，我用的是 :hover鼠標通過，須要其餘觸發事件能夠求助前端攻城獅。
svg的 overflow屬性必定要定義爲可見 visible，以確動畫效果後超出svg尺寸的部分可見。
關於polygon的動畫屬性的設定，這種 transition:all 1s ease表示全部的動畫時間爲1s，緩動效果。 transform-origin: 50% 50%定義了變換的原點爲每一個元素本身的center。

關於6組不一樣的動畫效果，我設定了位移translate，縮放scale，選擇rotate以及透明度opacity的變化。
這裏X軸和Y軸的位移，建議本身劃定一個範圍，值越大，擴散度越高，好比個人X和Y方向都是-800%~800%。另外關於旋轉的角度，rotate()，爲了符合物理規律，偏移的路徑越遠的旋轉的角度更大，反之亦然。
若是你想設定更多的不一樣的效果，只須要改nth-of-type(an+b)中n的係數a就能夠了。
若是懶得修改嘗試，UI設計師在套用這個模板時，只須要把本身製做（或者自動生成）的<polygon>標籤進行替換就能夠。好比咱們試一下把那張背景圖套用進去，就能輕鬆獲得下面這種動畫效果。