接著上篇繼續(xù)，上篇對(duì)于UI來(lái)說(shuō)，應(yīng)該是小菜菜，因?yàn)楫吘苟际且訟I為出發(fā)點(diǎn)，所有的調(diào)整也都是在AI里來(lái)完成，從現(xiàn)在開(kāi)始，繼續(xù)深入下去，加大點(diǎn)難度。上篇稱之為基礎(chǔ)篇，這篇是進(jìn)階篇。
6.進(jìn)階3——調(diào)整閉合路徑起點(diǎn)
上一篇的末尾留了個(gè)小尾巴，即閉合路徑的起點(diǎn)的問(wèn)題，為什么需要調(diào)整路徑起點(diǎn)呢？從實(shí)例入手，我們來(lái)說(shuō)一下。比如我想做下面這種變形：
有了上一篇的基礎(chǔ)，這時(shí)按部就班，先查看錨點(diǎn)數(shù)，然后給錨點(diǎn)數(shù)少的圖形打上幾個(gè)點(diǎn)，然后調(diào)整手柄之類的就不說(shuō)了。前面一直是兩個(gè)圖形的變形，那三個(gè)呢？定義兩個(gè)動(dòng)畫？當(dāng)然，不是不可以，但了解CSS3動(dòng)畫屬性的UI知道我們可以再加一個(gè)關(guān)鍵幀，我把CSS3動(dòng)畫模板改成下面這種，中間加一幀，位置我定在60%吧，就是前2/5草變?nèi)~子，后3/5葉子變羽毛，羽毛的描邊先不用理會(huì)。因?yàn)樽冃温詮?fù)雜，我讓動(dòng)畫時(shí)間變成6s。
<style>
@keyframes deform{
0% {d:path('');}
60% {d:path(''); }
100% {d:path(''); }
}
#animated {
animation: deform 6s ease;
}
</style>
保證每個(gè)錨點(diǎn)都有兩個(gè)非對(duì)稱手柄且路徑方向保持一致后，就可以導(dǎo)出SVG了，另外我希望動(dòng)畫效果是在原來(lái)位置變形，所以記得在導(dǎo)出之前把三個(gè)圖形疊合在一起，像下面這種：
那是否就能達(dá)到我們的初衷了呢？用效果說(shuō)話：
看到這里，設(shè)計(jì)師小伙伴要憤怒了，什么？我這個(gè)那個(gè)都調(diào)整了，怎么還是這種“亂七八糟”變形效果，這騙人的教程，先莫摔鼠標(biāo)，堅(jiān)持一下，你離成功只有一步之遙，那就是路徑起點(diǎn)（最后我會(huì)把操作過(guò)程全部理順）。
我把這三個(gè)圖形的起點(diǎn)和第一段路徑(都已經(jīng)統(tǒng)一成順時(shí)針?lè)较?用紅色標(biāo)出來(lái)，起點(diǎn)七零八落，那路徑的變形過(guò)程必然支離破碎，如果我們能把起點(diǎn)位置統(tǒng)一一下就好了，那怎么人為控制起點(diǎn)方向呢？當(dāng)然，如果你熟悉貝塞爾曲線的生成原理，就會(huì)知道小c繪制的曲線由于是針對(duì)前一個(gè)位置點(diǎn)相對(duì)位置，所以和起點(diǎn)坐標(biāo)無(wú)關(guān)，也就是你可以隨便去改M，但同時(shí)，你要去調(diào)整d值里面曲線段的順序，能實(shí)現(xiàn)，但略麻煩，而且改來(lái)改去，說(shuō)不定哪里就錯(cuò)了，那正解呢？
我們好好想一想，閉合路徑不能隨便控制，那我們把它搞成開(kāi)放路徑不就可以了，開(kāi)放路徑的點(diǎn)不就是路徑的起點(diǎn)嘛，然后，繼續(xù)，對(duì)了，AI里的剪刀工具，直接對(duì)著你想當(dāng)做起點(diǎn)的錨點(diǎn)咔擦就是一剪子，好啦，閉合路徑→開(kāi)放路徑，大家可以自己操作一下，導(dǎo)出SVG看一下，d值唯一的區(qū)別就是沒(méi)有以z結(jié)尾，就是宣告“我是開(kāi)放路徑”的意思。
那我按照這個(gè)方法，把三個(gè)圖形的的起點(diǎn)都統(tǒng)一到右下角那個(gè)位置（不用重合，靠得稍微近一些就可以）。
然后動(dòng)畫效果看一下如何：
也不夠順滑！！但和上面那個(gè)無(wú)序的對(duì)比，能明顯看出似乎底部有個(gè)點(diǎn)讓它們以此為基點(diǎn)進(jìn)行變換，那就是我們定義的起點(diǎn)。這里我要給自己辯解一下了，因?yàn)槲业倪@三個(gè)圖形實(shí)在差別太大，但這個(gè)方法一定要掌握，因?yàn)槟苋藶椴倏v路徑起點(diǎn)在做一些變形動(dòng)畫時(shí)很有用處。
路徑變形動(dòng)畫不同于其他動(dòng)畫，相對(duì)復(fù)雜，需要調(diào)節(jié)的地方很多，我把順序理一遍。
1.加錨點(diǎn)——需要變形的圖形要保證相同的錨點(diǎn)數(shù)。
2.調(diào)整手柄——確保每個(gè)錨點(diǎn)有兩個(gè)非對(duì)稱手柄
3.自定義起點(diǎn)——通過(guò)使用剪刀把閉合路徑轉(zhuǎn)化成開(kāi)放路徑
4.d值檢查——導(dǎo)出的SVG按固定格式排列以便檢查對(duì)比d值，目的1，確認(rèn)路徑方向，需要反向路徑的轉(zhuǎn)換成復(fù)合路徑后進(jìn)行反轉(zhuǎn)路徑操作（并非所有動(dòng)畫效果都需要保證同向，根據(jù)實(shí)際想得到的效果來(lái)）；目的2，有個(gè)別非小c開(kāi)頭的找到對(duì)應(yīng)路徑，調(diào)整。
5.套用CSS代碼模板——可調(diào)節(jié)參數(shù)或增加其他動(dòng)畫效果。
一般的路徑變形動(dòng)畫需要的問(wèn)題差不多就在這里了，有設(shè)計(jì)師如果親測(cè)過(guò)程中遇到問(wèn)題，可留言，包解決。
7.進(jìn)階4——開(kāi)放路徑變形動(dòng)畫
其實(shí)，上面我們把路徑剪開(kāi)后，閉合路徑已經(jīng)是開(kāi)放路徑了，不過(guò)是由于起點(diǎn)終點(diǎn)重合，視覺(jué)上是閉合的而已，但仍然把這個(gè)單獨(dú)拿出來(lái)說(shuō)，是因?yàn)槁窂阶冃蝿?dòng)畫實(shí)在是太太有用處了，就算我們拿一段兩點(diǎn)組成的最簡(jiǎn)單的路徑來(lái)說(shuō)。還是我們的模板，其他部分不變，我改了一下運(yùn)動(dòng)速率的參數(shù)。
animation: deform 1s cubic-bezier(.75,0,1,.23) infinite alternate;
然后得到了一條觸底反彈的繩子。
我們?yōu)槭裁匆灾骺刂坡窂椒较颍?br> 因?yàn)橥瑯舆€是這根繩子，路徑方向反向之后，效果就變成了下面這種：
還是這根繩子，我調(diào)整一下手柄變成一個(gè)波浪線，然后就能得到下面這種轉(zhuǎn)來(lái)轉(zhuǎn)去效果：
以及這種扭來(lái)扭曲的效果
還有走了走去的效果
前面說(shuō)了那么多的目的，就是想讓UI設(shè)計(jì)師以最快的方法掌握動(dòng)畫，擺上圖形，然后搞定，剩下自動(dòng)生成。比如我就那么隨意擺上四根波浪線：
然后把對(duì)應(yīng)的d值套用到我們動(dòng)畫代碼里，當(dāng)然了，四個(gè)不同的路徑，中間再補(bǔ)充兩個(gè)關(guān)鍵幀，然后得到了什么？就是下面這只瘋狂的蟲(chóng)子：
而且，這還只有兩個(gè)錨點(diǎn)，如果更多的錨點(diǎn)，會(huì)產(chǎn)生各種無(wú)限的可能，方法是固定的，剩下就是創(chuàng)意了。真正好的動(dòng)效，不一定實(shí)現(xiàn)的技術(shù)多復(fù)雜，可能只是最基礎(chǔ)的變化，我自己也很欠缺想法，也在努力改進(jìn)中。
路徑變形動(dòng)畫是CSS3動(dòng)畫的終極形式，其他的縮放也好、斜切也好、位移也好，等等，通過(guò)路徑的變形都可以實(shí)現(xiàn)，只不過(guò)規(guī)則的動(dòng)畫效果用其他動(dòng)畫屬性實(shí)現(xiàn)起來(lái)更簡(jiǎn)單而已。
所以，在做這類動(dòng)畫時(shí)，自主權(quán)一定要牢牢掌握在我們的手里，路徑起點(diǎn)也好，方向也好，知道怎么調(diào)整，這樣才能預(yù)知?jiǎng)赢嬓Ч?/p>
本來(lái)想這篇就結(jié)束，后來(lái)發(fā)現(xiàn)需要再補(bǔ)充兩個(gè)高階的，一個(gè)是鏤空?qǐng)D形的變形動(dòng)畫，一個(gè)是一變多和多變一如何實(shí)現(xiàn)的，占用篇幅比較大，那這個(gè)更名為中篇，最后的放到下篇吧。
