寫(xiě)在前面：視覺(jué)寶寶們，在設(shè)計(jì)界全民視頻化，VR，動(dòng)效滿天飛，每天都在創(chuàng)新的互聯(lián)網(wǎng)設(shè)計(jì)新時(shí)代浪潮下，你還在為自己精心堆砌出的完美像素沾沾自喜么？
殘忍的告訴你，這已經(jīng)遠(yuǎn)遠(yuǎn)不夠了，得讓你的設(shè)計(jì)動(dòng)起來(lái)！不僅能讓前端工程師更清楚的理解你腦中的呈現(xiàn)效果，減少溝通及返工成本，同時(shí)也能讓我們的設(shè)計(jì)輸出更加完整專(zhuān)業(yè)并且B格滿滿。
然而傳統(tǒng)的用Photoshop時(shí)間線來(lái)制作動(dòng)效的方法，過(guò)于復(fù)雜，并且不夠靈活，在需要做到位移和縮放效果并行的時(shí)候就顯得尤為笨拙，往往需要一幀一幀的設(shè)置并不斷調(diào)試，太耗費(fèi)精力，并且呈現(xiàn)效果還不一定順暢， 而能夠做出細(xì)膩動(dòng)效的像AfterEffects等專(zhuān)業(yè)動(dòng)效軟件學(xué)習(xí)成本又過(guò)高，讓人望而卻步…
不要藍(lán)瘦，不要香菇，這個(gè)時(shí)候其實(shí)我們完全可以偷個(gè)懶，彎道超車(chē)！
來(lái)，先看張圖：
如此流暢細(xì)膩的動(dòng)效當(dāng)然不是用Photoshop一幀幀做出來(lái)的~ 我們用Keynote，3分鐘就能實(shí)現(xiàn)，快來(lái)一起get這個(gè)技能吧！
首先，你的電腦里需要安裝以下2個(gè)軟件：
Step 1，先將你需要制作動(dòng)效的源文件在Photoshop里分好層，并導(dǎo)出png文件（以進(jìn)口無(wú)線伙拼題圖動(dòng)效為例）；
Step 2，再拖移至Keynote里，并將分層的圖片按照設(shè)計(jì)稿中的最終位置及圖層順序排列；
Step 3，為每個(gè)需要?jiǎng)討B(tài)效果的圖層設(shè)置動(dòng)作，可以是位移并同時(shí)縮?。?操作：動(dòng)畫(huà)效果 > 動(dòng)作 > 添加效果 > 移到，然后鼠標(biāo)拖動(dòng)圖層至需要移到的位置及尺寸
同時(shí)可以分別針對(duì)每個(gè)圖層動(dòng)作設(shè)置 “持續(xù)時(shí)間”，使動(dòng)作呈現(xiàn)效果更有層次；
Step 4，全部設(shè)置完成后，點(diǎn)擊右下角 “動(dòng)作順序” , 將構(gòu)件順序全部設(shè)置為 “與構(gòu)件1一起”，至此你的動(dòng)效設(shè)計(jì)已經(jīng)完成一大半了！點(diǎn)擊預(yù)覽，查看呈現(xiàn)效果，如不夠完美，可回到Step 3，繼續(xù)對(duì)每個(gè)圖層動(dòng)作進(jìn)行微調(diào)。
Step 5，預(yù)覽確認(rèn)視頻效果ok后導(dǎo)出MP4，保存； 操作：文件 > 導(dǎo)出到 > Quicktime
將等待時(shí)間全部設(shè)置為0秒，如需小尺寸輸出可將格式設(shè)置為720P，導(dǎo)出尺寸會(huì)更小。
Step 6，將導(dǎo)出的視頻文件在MAC系統(tǒng)自帶的Quicktime Player中打開(kāi)，快速剪輯（如不在意動(dòng)效前后停頓時(shí)間過(guò)長(zhǎng)可省略此步驟）； 操作：編輯 > 修剪，此時(shí)可以看到播放窗口中的視頻文件部分出現(xiàn)了一個(gè)黃色的邊框，拖動(dòng)黃色邊框兩端部分，裁切掉視頻前后部分的空白內(nèi)容，保留中間動(dòng)作部分，并儲(chǔ)存；
Step 7，在Photoshop中打開(kāi)剪輯好的視頻文件（如需要，可在Photoshop中對(duì)視頻尺寸進(jìn)行裁切），輸出gif格式； 操作：文件 > 儲(chǔ)存為web所用格式，選擇Gif格式，并將動(dòng)畫(huà)循環(huán)選項(xiàng)設(shè)置為永遠(yuǎn)；
至此，祝賀你，動(dòng)效已經(jīng)完美生成，預(yù)覽一下看看，是否足夠順滑流暢。
寫(xiě)這么多，其實(shí)就是拋個(gè)磚，大家可以發(fā)揮想象力，開(kāi)大腦洞，制作出更為精細(xì)順滑的動(dòng)態(tài)效果。
