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

泱泱發表於2018-03-22
SVGCSSS3動畫

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

SVG+CSS3仿作了2018草莓音樂節的宣傳視訊動畫
首先放上一張靜態圖，來分析動效。一共涉及三種動效，位移，旋轉，漸隱漸現。

當把元素分析完成後，現在就要在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*/
複製程式碼

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

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

go on。接下來如圖：

SVG+CSS3仿作了2018草莓音樂節的宣傳視訊動畫
三個圓從中心依次出現放大，這是一個基礎的縮放動效transform:scale()。這裡就要用到控制SVG描邊屬性縮放文章中提到的描邊屬性不受縮放控制的神句了，三個圓的描邊屬性後面都要加上vector-effect:non-scaling-stroke，由於出現的順序不同，又要疊加其他動畫，為了避免自己搞不清各部分動畫的時間次序（畢竟不是AE，時間軸不直觀），所以繪製了一個簡單的時間軸。

SVG+CSS3仿作了2018草莓音樂節的宣傳視訊動畫
動畫屬性定義中，只要開始的時間依次設定好久可以了，另外關於縮放的倍數，由於從無到有，初始值一定是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後開始擴大*/
複製程式碼

合成後效果如下：

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

go on……

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

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

SVG+CSS3仿作了2018草莓音樂節的宣傳視訊動畫
為了方便定義屬性，我以三角形斷開時的形狀為基準，因為第一步是Y軸向的縮放，X軸不變，所以僅定義transform:scaleY()，而在第二步變形中，X軸向與Y軸向縮放時不同步的，因此要分開寫成transform:scaleX()scaleY()。為了確保第一步統一的變形效果，要先把兩個三角都放在一個組中，給這個組進行變形動畫。

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

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

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

@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+CSS3仿作了2018草莓音樂節的宣傳視訊動畫
看下效果，似乎不錯，截止到這一步，第一階段的動畫才算完成，之所以稱作第一階段，是因為這時原底圖可以退出舞臺，全新的下一幕開始了。

SVG+CSS3仿作了2018草莓音樂節的宣傳視訊動畫
這裡右側圓形實現這種效果有點複雜，在SVG剪下蒙版屬性clip-path文章中詳細說明了實現過程。 各部分圖形的順序至關重要。

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

來看下效果

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

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

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

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

SVG+CSS3仿作了2018草莓音樂節的宣傳視訊動畫
首先需要定義一個蒙版的位移動效

@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，看看完整的效果就好，原始碼那裡亂成毛線，光註釋都能看吐，就不要看了 。 草莓音樂節酷酷的宣傳視訊還有其他幾個，不準備做了，下次探討點有趣的東西，就醬。

相關文章