SVG+CSS3仿做了2018草莓音樂節的宣傳視頻動畫

這是從2018「草莓音樂節」的宣傳視頻獲得的靈感，海報的主題是錯位拼貼分割重組，對我這種設計渣渣而言，看中的是其平面化，也就是說，用SVG+CSS3動畫徹底能夠玩轉。由於只涉及一些基礎元素的位移、縮放構成的轉場效果，相對來講比較簡單，但創意很開腦洞。由於宣傳視頻比較長，因此把它分割成了幾個部分，依次來完成。

首先放上一張靜態圖，來分析動效。一共涉及三種動效，位移，旋轉，漸隱漸現。

當把元素分析完成後，如今就要在AI中進行相應的分層，便於SVG代碼的解讀。在AI中，對應各個部分，放置到不一樣的圖層中，每一個圖層作好命名，依次爲底圖base、向上移動moveUp、向下移動moveDown、中間大圓baceCenter、中間小圓centerCircle、周圍圓點dot。由於涉及Y軸方向的位移動畫，因此在底圖的繪製時，須要移動的部分要超出畫板。

CSS3部分相對來講比較簡單，旋轉動畫transform:rotate()，位移動畫transform:translateY()，由於小圓點只是裝飾做用，因此只設計了兩種類型的透明度的改變，任意分紅了兩組。

@keyframes centerCircle{
0%{transform:rotate(0deg); transform-origin:center center}
100%{transform:rotate(-360deg); transform-origin:center center}
}
 #centerCircle{animation:centerCircle linear 4s infinite ; }   /*中心旋轉圓設置*/

@keyframes moveUp{
0% {transform: translateY(0)}
100% {transform: translateY(-70px)}
}
#moveUp {animation:moveUp linear 4s infinite alternate; }   /*向上移動*/


@keyframes moveDown{
0% {transform: translateY(0)}
100% {transform: translateY(70px)}
 }
#moveDown {animation:moveDown linear 4s infinite alternate; }   /*向下移動*/

@keyframes dot1{
0%{opacity:0}
100%{opacity:1}
}
#dot1{animation:dot1 ease 2s infinite alternate}/*漸隱漸現小圓點樣式1*/

@keyframes dot2{
0%{opacity:0.7}
70%{opacity:0}
100%{opacity:0.3}
}
#dot2{animation:dot2 ease 2s infinite alternate}/*漸隱漸現小圓點樣式2*/
複製代碼

先跑起來看看效果，大塊的色塊，濃郁的色彩，彷佛還不錯。

go on。接下來如圖：

三個圓從中心依次出現放大，這是一個基礎的縮放動效 transform:scale()。這裏就要用到 控制SVG描邊屬性縮放文章中提到的描邊屬性不受縮放控制的神句了，三個圓的描邊屬性後面都要加上 vector-effect:non-scaling-stroke，因爲出現的順序不一樣，又要疊加其餘動畫，爲了不本身搞不清各部分動畫的時間次序（畢竟不是AE，時間軸不直觀），因此繪製了一個簡單的時間軸。

動畫屬性定義中，只要開始的時間依次設置很久能夠了，另外關於縮放的倍數，因爲從無到有，初始值必定是 scale(0)，結束的值和定義的圓的半徑有關，能夠多調整幾個值，獲得最滿意的效果。

@keyframes purpleCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1.5);transform-origin:center center}
}
#purpleCircle{animation:purpleCircle linear 1.5s 1s both}  /*最大圓 1S後開始擴大*/

@keyframes whiteCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(2);transform-origin:center center}
}
#whiteCircle{animation:whiteCircle linear 1.5s 1.5s both}   /*中間圓 1.5S後開始擴大*/

@keyframes blueCircle{
0% {transform:scale(0); transform-origin:center center}
100% {transform:scale(1);transform-origin:center center}
}
#blueCircle{animation:blueCircle linear 1.5s 2s both}    /*最小圓 2S後開始擴大*/
複製代碼

合成後效果以下：

go on……

如上圖所示，當白色圓擴展到整個畫布後，中間出現兩個三角，三角的變形動畫以下：

爲了方便定義屬性，我以三角形斷開時的形狀爲基準，由於第一步是Y軸向的縮放，X軸不變，因此僅定義 transform:scaleY()，而在第二步變形中，X軸向與Y軸向縮放時不一樣步的，所以要分開寫成 transform:scaleX()scaleY()。爲了確保第一步統一的變形效果，要先把兩個三角都放在一個組中，給這個組進行變形動畫。

<g id="triangle">
<polygon id="triLeft" points=""/> <!--左側三角-->
<polygon id="triRight"  points=""/>  <!--右側三角-->
</g>
複製代碼

動畫屬性中須要注意的是transform-origin變形基點的定義。當兩個三角斷開後，基點對應以下：

@keyframes triangle{
0% {transform:scaleY(0);transform-origin:}
100%{transform:scaleY(1);transform-origin:} /*變形的基點爲交點座標*/
} 
#triangle{animation:triangle linear 0.5s 2.5s both}  /*兩個三角形Y軸向擴大*/

@keyframes triLeft{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*變形的基點爲左側邊中點座標*/
100%{transform:scaleY(0.15)scaleX(0.05);transform-origin:}
} 
#triLeft{animation:triLeft linear 0.5s 3s both}  /*左側三角形向左水平縮小*/

@keyframes triRight{
0% {transform:scaleY(1)scaleX(1);transform-origin:} /*變形的基點爲右側邊中點座標*/
100%{transform:scaleY(0.6)scaleX(0.5);transform-origin:}
} 
#triRight{animation:triRight linear 0.5s 3s both}  /*右側三角形向右水平縮小*/
複製代碼

看下效果，彷佛不錯，截止到這一步，第一階段的動畫纔算完成，之因此稱做第一階段，是由於這時原底圖能夠退出舞臺，全新的下一幕開始了。

這裏右側圓形實現這種效果有點複雜，在 SVG剪切蒙版屬性clip-path文章中詳細說明了實現過程。 各部分圖形的順序相當重要。

來看下效果

好了，第二部分也正式結束，第三部分相對簡單一些，基本只有透明度的屬性變化。和第一部分底圖的圓點的動效基本類似，無非圖形更復雜一些，就再也不贅述，直接放上最終效果吧。

惟一須要說的是左上角相似漸變網格的圓點，使用了運動的漸變蒙版來實現。

首先須要定義一個蒙版的位移動效

@keyframes maskXY{
0%{transform:translate(0, 0);}
100%{transform:translate(-70px, -70px); } /*向左上角位移*/
}
#maskXY{animation:maskXY linear 3s 5s both} 
複製代碼

漸變類型的定義和圖形是AI導出時生成的，通常不用修改，只是各類定義比較多，別把本身繞進去就行。

<mask id="maskMove"> <!--定義漸變蒙版--> 
    <g id="maskXY"> <!--位移動效-->
	<defs>
    <linearGradient  id="jianbian" …>
      <stop offset="0" stop-color="#fff"/>
   <stop offset="1"/>
    </linearGradient> <!--定義漸變類型-->
  </defs>
   <rect x="" y="" width="" height="7" transform=""  style="fill: url(#jianbian)"/><!--矩形使用漸變色填充-->
  </g>
 </mask>
  <g mask="url(#maskMove)"> <!--使用漸變模板--> 
  …漸變網格圓點
  </g>
複製代碼

來吧，小結一下，雖然作的過程費了點力氣，純粹的體力活，但作完以後的收穫仍是比較大的，這一個案例就又一次突破了認知，好比描邊屬性縮放的控制，好比剪切蒙版屬性的使用，好比深深的體會到看DOM看到眼瞎的感受。 codepen預覽地址SVG+CSS3 animation copy propagandist video of 2018 Strawberry Music Festival，看看完整的效果就好，源碼那裏亂成毛線，光註釋都能看吐，就不要看了 。 草莓音樂節酷酷的宣傳視頻還有其餘幾個，不許備作了，下次探討點有趣的東西，就醬。