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