不炫技，SVG+CSS3 旋轉動畫屬性就能實現的夢幻效果

CSS3的動畫相關的基礎的屬性基本都涉獵過了，我的認爲，其中最複雜的是d:path()路徑變形動畫，超過3D，而位移、軌跡、旋轉、縮放、斜切什麼的，相對簡單一些，但做爲非動畫設計師而言，靈活的掌握這些基本的動畫加以無窮無盡的變換，就已經能作出不少華麗麗的效果了，這篇呢，源於作一個練習時，AI的連續旋轉複製功能，試着作了幾個動效，簡單、省時、高效，最主要的是用到CSS3的transform:rotate()旋轉屬性，輔以位移和縮放。

1.最基本的旋轉動畫

下面這張效果圖，粗通AI的設計師小夥伴們必定都不會陌生，在AI裏面就是ctrl+D連續複製的體力活。

若是把連續旋轉複製轉成CSS3語言，也是極簡單的。來分析一下上面的圖形，我作的時候每次旋轉的角度爲10度，就意味着有36朵花瓣，那對應SVG裏應該有36個路徑 <path>，若是是AI直接導出的SVG看一下代碼，也是密密麻麻的羅列，由於都是相同的形狀，天然有簡單的方法來實現，只需定義一個被重複使用的圖形，有兩種方法 <defs>元素和 <symbol>元素來定義， <use>元素來引用，那由於 <symbol>元素使用範圍更寬泛一些，因此咱們須要的工做就簡化成，在AI裏作一片花瓣的基礎圖形，而後導出路徑後，定義以下

<symbol id="single">
 <path d=""/> <!--此處爲AI導出的單片花瓣的路徑-->
 </symbol>
複製代碼

先來第二片花瓣（也就是第一個旋轉的花瓣），CSS部分定義以下：

@keyframes leaf1{
0%{transform:rotate(0deg); transform-origin:400px 300px}
100%{transform:rotate(10deg); transform-origin:400px 300px}
}
#petal1{animation:leaf1 ease 0.1s both;}
複製代碼

DOM部分，只須要用<use>元素引用定義好的花瓣而且賦給它旋轉的動效就能夠了。

好了，剩下的仍是體力活，須要把<use>元素部分複製34次，而後CSS動畫部分複製34次，固然了，動畫那裏，須要遞增一下時間和旋轉角度，好比接下來那片花瓣<use id="leaf2" xlink:href="#single"/>對應以下動畫屬性：

@keyframes leaf2{
 0%{transform:rotate(0deg); transform-origin:400px 300px}
 100%{transform:rotate(20deg); transform-origin:400px 300px} /*角度增長10度*/
 }
 #leaf2{animation:leaf2 ease 0.2s both;} /*動畫時間增長0.2s*/
複製代碼

因此在作動效時發現，不會js絕對是短板，尤爲在這種批量的活中，原本就是repeat的工做，用SCSS的話，$deg: $deg + (360deg / 36)和animation: leaf#{$i} 0.2s ease both來代替那一堆羅裏吧嗦的動畫定義是否是很爽，哎，不說了，不過，這個動效確實瓣瓣有些多，下面咱們會簡化，另外，相信我，已經試過了，別手抽的話，大概10分鐘也就搞完了。如今，若是不出意外，已經能獲得下面這朵綻開的花了

彷佛還不錯，但仍有須要優化的地方，首先，花瓣是帶透明度的，一開始未旋轉時重複在相同區域，層層疊加致使透明度下降，看上去不像是旋轉複製的效果，而是把一大把重疊的花瓣依次展開的效果（腦補一下賭神中一封撲克「唰」的展開的場景），若是仔細看看咱們的實現過程，就是如此，那這裏想要達到每一瓣都是從上一瓣的位置複製出去，怎麼辦，改唄。這裏實現的思路也是有多種，我是用改透明度的方法。放上前三片旋轉花瓣的CSS3定義和上面的對比一下（不是要羅代碼，只是太少看不出規律）：

@keyframes leaf1{
 0%{opacity:0; transform:rotate(0deg); transform-origin:400px 300px} /*增長初始透明度的定義0，即初始不可見*/
 100%{transform:rotate(10deg); transform-origin:400px 300px}
 }
 #leaf1{animation:leaf1 ease 0.1s both ; }

 @keyframes leaf2{
 0%{opacity:0; transform:rotate(10deg); transform-origin:400px 300px} /*增長初始位置定義，即上一朵花瓣的位置*/
 100%{transform:rotate(20deg); transform-origin:400px 300px} 
 }
 #leaf2{animation:leaf2 ease 0.1s both 0.1s; } /*動畫時間統一爲0.1s並增長動畫延遲時間的設置0.1s*/

@keyframes leaf3{
0%{opacity:0; transform:rotate(20deg); transform-origin:400px 300px}
100%{transform:rotate(30deg); transform-origin:400px 300px}
}
#leaf3{animation:leaf3 ease 0.1s both 0.2s;} /*動畫延遲時間0.2s，依次類推*/
複製代碼

在進行一番純體力運動後，完成了以下優化後的效果：

好了，以此爲基礎，來試試其餘效果。（爲了好作，我把花瓣數量減半了）。好比換換旋轉原點transform-origin的值，改一下顏色，就獲得了下面這種：

上面效果都是單色的，沒有體現設計師小夥伴們那卓越的配色效果對不對？虐心的改造來了，好比每朵花瓣單獨定義顏色（對我這種毫無審美的假設計師而言只能用系統的色板取色），再隨隨便便換換基礎圖形（即 <symbol>定義的圖形），就獲得了下面這種蝴蝶展翅：

好啦，剩下的本身玩吧，各類形狀，走起，總之，你在AI裏面能實現的此類效果均可以經過這種動畫方式來實現。

2.疊加縮放動畫

嫌棄單純的旋轉複製的效果太單調？沒有關係，咱們來一個個疊加其餘動畫屬性，先疊加個簡單的，縮放動畫。這個也是在AI中經常使用的功能之一，縮放和旋轉操做後，反覆的ctrl+D來複制操做。看下下面這張圖，解析一下

不過是最裏面的圓角矩形先等比例放大後旋轉一個固定角度，後面的依次重複這種變換， 縮放+旋轉→複製，那咱們來轉成CSS3屬性。 基於上面的基礎，首先把 <symbol>定義的基礎圖形改一下，旋轉的那裏不用管，如今要增長一個縮放的屬性 scale()設置。好比在這個例子裏，我縮放是按1.2倍來進行的，以第一個進行變化的圖形爲例，CSS屬性定義以下：

@keyframes leaf1{
0%{opacity:0; transform:rotate(0deg); transform-origin:400px 300px}
100%{transform:rotate(30deg) scale(1.2); transform-origin:400px 300px} /*增長縮放的比例設置*/
}
複製代碼

這裏比旋轉變形略複雜的在於比例的計算，不像角度那樣能夠30度60度90度……直接疊加，縮放比例則是1.二、1.2*12.、1.2*1.2*12……須要稍微計算一下。這樣咱們就獲得了下面這個旋轉疊加縮放的複製動效：

一樣，改改形狀和變形的原點，能夠很輕鬆的作出下面這種

這裏除了填充顏色不一樣，還稍微改了一下，用了CSS3的混合模式，增長了一個屬性值mix-blend-mode:lighten，也就是咱們PS或者AI混合模式中的變亮。 transform:scale()屬性與旋轉不一樣，是支持兩個值的，好比寫成這種transform:scale(1,1.3)就意味着寬度不變，高度放大1.3倍，我改了一個三角形的看一下效果。

只是簡單的示例，效果不是很好，有創意的設計師能夠自行發揮，知道能夠分開定義就能夠啦。

3.疊加位移動畫

有了上面關於疊加縮放動畫的嘗試，疊加位移動畫就簡單多了。看一下下面這種動效效果，這是一個很討巧的動畫。

之因此說它討巧，是由於仔細分析動效，全部花瓣的位移都是一致的，也就是說我把位移屬性設置到了全部花瓣元素的組合 <g>元素上。這樣的話，我賦給組合一個位移屬性設置 transform:translateX(50px) translateY(50px)，就能夠實現這種效果了。關於旋轉原點的定義，由於每一個花瓣都是在一個動態位移的過程當中，因此我把旋轉原點定義爲 transform-origin:30% 30%，讓每一個花瓣都以本身的固定的一個點爲基準。

關於漸變色的配色，這裏有個小技巧能夠參考一下。

咱們經常使用的色值，除了RGB和十六進制表示方法，還有一個hsl（色相、飽和度、明度）表示方法。如上圖所示，最深色和最淺色的hsl值獲取到以後，剩下的顏色能夠手動去寫。

在考慮用什麼來展示這種旋轉複製的位移動畫時，忽然想到了一個高逼格的圖形，鸚鵡螺的黃金螺旋！來看下下面這張圖。

被複用的是一個1/4扇形，旋轉角度爲-90度（90度爲順時針旋轉），放大的比例有規律可尋，即斐波那契數列。位移值最簡單的計算方法是和上一個相比較，好比圖形7和圖形6相比，垂直方向沒有位移，水平方向正向位移爲圖形5的寬（高）度。 **由於這裏transform設置了scale、rotate、translate三種屬性，在書寫順序的時候，必定要把rotate放到scale**的後面，防止由於旋轉致使座標系變化，位移值很差推算。

這樣，咱們就獲得了一個完美黃金螺旋動效。這裏我惟一不能理解的是若是不是填充而是描邊屬性，描邊值會等比例放大。

對於此類旋轉複製動畫，最重要的是<symbol>元素定義重複使用的圖形，而後<use>元素去引用。重複幾回就引用幾回。