微信公眾號改版后，增加了把瀏覽的文章縮小為浮窗的功能，相應(yīng)地也融入了非常有趣的浮窗動效。本文通過 Principle 這款軟件，從 0 到 1 詳細(xì)講解了浮窗動效制作的全過程，你也可以選擇直接觀看 視頻演示。?

效果如下：

本教程一共六個制作步驟：

• 第一步：Principle 導(dǎo)入 Sketch文件；
• 第二步：制作浮窗拖拽效果；
• 第三步：制作取消浮窗進(jìn)/出場動畫；
• 第四步：制作頁面遮罩轉(zhuǎn)場動畫；
• 第五步：制作取消浮窗交互；
• 第六步：導(dǎo)出 Gif 格式。

第一步：Principle 導(dǎo)入 Sketch 文件

Sketch 源文件已經(jīng)提前分組并命名好了，包括 Moments、Cancel、Article 三個畫板。（注：組名稱后面帶 * 號，表示導(dǎo)入 Principle 后該組會合并為一個圖層）

打開 Principle 軟件，點(diǎn)擊工具欄中的「Import」工具，會出現(xiàn)下拉框，選擇「x2」 倍率，再次點(diǎn)擊下拉框中的 Import 按鈕，即可一鍵導(dǎo)入當(dāng)前 Sketch 中的所有畫板，輕松快捷。

第二步：制作浮窗拖拽效果

在畫板 Moments 中選中浮窗元素 (Window)，在屬性面板中將其 Horizontal (橫向) 和 Vertical (縱向) 都設(shè)置成「Drag」，表示橫/縱向都可進(jìn)行拖拽交互。

1. 拖拽開始

再次選中浮窗元素，點(diǎn)擊右側(cè)的閃電圖標(biāo)，會彈出交互事件列表，我們選擇「Drag Begin」 并按住鼠標(biāo)左鍵不放，將藍(lán)色的鏈接線指向 Cancel 畫板后松開鼠標(biāo)，這時拖拽開始的交互已經(jīng)形成。

2. 拖拽結(jié)束

同樣的方法，我們在 Cancel 畫板中也選中浮窗元素，點(diǎn)擊閃電圖標(biāo)后選擇「Drag End」，并將鏈接線指向 Moments 畫板，這樣拖拽交互就形成了開始到結(jié)束的閉環(huán)，可以在右側(cè)的預(yù)覽窗口中進(jìn)行拖拽預(yù)覽。

3. 拖拽細(xì)節(jié)

Y 軸吸附效果

選中「Window Drag Ends」這條鏈接線后，會自動打開它的 Animate 面板。在面板中選擇「Window」圖層下的Center Y，點(diǎn)擊它右側(cè)的 “雪花” 圖標(biāo)，將其 Y 軸方向凍結(jié) (Frozen)。此時，在預(yù)覽窗口中拖拽浮窗至任意位置，松開后，它都會自動吸附在 Y 軸方向。

X 軸彈性動畫

依然打開剛才的 Animate 面板，可以看到「Window」圖層的 Center X 屬性旁有一段藍(lán)色的關(guān)鍵幀，表示自動形成的補(bǔ)間動畫。

在兩個關(guān)鍵幀之間單擊會彈出運(yùn)動曲線，我們選擇彈性曲線 （Spring），然后設(shè)置張力 （Tension）?和摩擦力 （Friction）的參數(shù)，可以根據(jù)想要的效果靈活的設(shè)置，這里我給出兩個推薦參數(shù)，Tension：300、Friction：24。通過拖拽預(yù)覽可以看到，此時的浮窗已經(jīng)具有彈性效果。

第三步：制作取消浮窗進(jìn)/出場動畫

到這一步就比較簡單了，其實在之前的拖拽操作時，取消浮窗元素就已經(jīng)帶有出場動畫，不過非常生硬不自然。我們要做的就是豐富它的動畫過程，使其過渡更細(xì)膩流暢。

1. 補(bǔ)間動畫

在 Cancel 畫板中復(fù)制「取消浮窗」元素，然后粘貼到 Moments 畫板中，接著將其移動到右下方的畫板之外 (沿 45 度角路徑)。在預(yù)覽窗口中，通過拖拽浮窗可以看到，取消浮窗元素已經(jīng)形成了流暢自然的進(jìn)/出場動畫。

2. 添加細(xì)節(jié)

如果想讓動畫過程更加豐富細(xì)膩，可以給取消浮窗元素添加不透明度和彈性效果。這一步可有可無，有興趣的同學(xué)可以嘗試一下，這里不再展開敘述。

第四步：制作頁面遮罩轉(zhuǎn)場動畫

第四步比前幾步會稍微復(fù)雜一點(diǎn)，不過我相信也難不倒大家。

1. 添加點(diǎn)擊事件

選中 Moments 畫板中的浮窗元素，點(diǎn)擊閃電圖標(biāo)后，選擇「Tap」 并按住鼠標(biāo)左鍵不放，將藍(lán)色的鏈接線指向 Article 畫板后松開鼠標(biāo)，這樣就實現(xiàn)了點(diǎn)擊跳轉(zhuǎn)效果。不過這樣的跳轉(zhuǎn)非常生硬和突然，需要給它加上過渡效果。

2. 遮罩動畫

（1）遮罩進(jìn)場

首先，選中 Article 畫板中的 Page2 圖層，將其移動到 Window 組里的 Base 圖層內(nèi)部，從而形成父子關(guān)系；然后將屬性面板中的「Clip Sublayers」選項勾選上，這也是遮罩動畫的關(guān)鍵一步。

接下來，將帶有遮罩的 Base 圖層從 Article 畫板復(fù)制粘貼到 Moments 畫板，替換 （刪除）原來的 Base 圖層。選中 Base 內(nèi)的 Page2 圖層，將其不透明度改為 0%。

最后，選中 Article 畫板中的 Base 圖層，在屬性面板里將它的圓角 （Radius） 改為 500 后，按住 alt+shift 將 Base 原位等比例放大，直至可以完全顯示其內(nèi)部的 Page2 內(nèi)容即可，并將 Eleme Logo 圖層的不透明度改為 0%，這樣就形成了遮罩動畫，可在預(yù)覽窗口中操作預(yù)覽。

為了便于觀察，我們點(diǎn)開 Base 圖層的調(diào)色面板，將其不透明度改為 0%，這時 Base 的大圓就被隱藏起來了。（注意：這里一定要從調(diào)色面板里修改不透明度，否則圖層將會失效）

遮罩出場

選中 Moments 畫板，command+d 原位復(fù)制，將 Moments2 畫板至于最底部。為了避免交互錯亂的情況出現(xiàn)，我們選中 Moments2 畫板與其他畫板的鏈接線 （Window Tap 和 Window Drag Begins），依次右擊選擇「Delete Event」刪除它們。

在 Article 畫板中新建一個矩形（快捷鍵 R），將它移動到導(dǎo)航欄中的 “X” 圖標(biāo)位置，點(diǎn)擊矩形旁的閃電圖標(biāo)后，選擇「Tap」 并按住鼠標(biāo)左鍵不放，將藍(lán)色的鏈接線指向 Moments2 畫板后松開鼠標(biāo)，這樣就實現(xiàn)了關(guān)閉/返回的交互。

為了不影響視覺效果，我們同樣點(diǎn)開矩形圖層的調(diào)色面板，將其不透明度改為 0%，可在預(yù)覽窗口中操作預(yù)覽。

第五步：制作取消浮窗交互

如果大家前幾步都做得沒問題，這步就會非常容易。

1. 觸摸按下

選中 Cancel 畫板，command+d 原位復(fù)制，將 Cancel2 畫板至于最底部。選中 Cancel2 與其他畫板的鏈接線 （Window Drag Ends），右擊選擇「Delete Event」刪除它。

在 Moments2 畫板中選中浮窗元素 (Window)，點(diǎn)擊浮窗旁的閃電圖標(biāo)后，選擇「Touch Down」 并按住鼠標(biāo)左鍵不放，將藍(lán)色的鏈接線指向 Cancel2 畫板后松開鼠標(biāo)，這樣就實現(xiàn)了觸摸按下的效果。

2. 觸摸抬起

選中 Moments2 畫板，command+d 原位復(fù)制，將 Moments3 畫板至于最底部。選中 Moments3 與其他畫板的鏈接線 （Window Touch Down），右擊選擇「Delete Event」刪除它。

在 Cancel2 畫板中選中浮窗元素 （Window），點(diǎn)擊浮窗旁的閃電圖標(biāo)后，選擇「Touch Up」 并按住鼠標(biāo)左鍵不放，將藍(lán)色的鏈接線指向 Moments3 畫板后松開鼠標(biāo)。

將 Moments3 畫板中的浮窗元素（Window）移動到畫板右下角的位置（也就是取消浮窗的位置），然后把它的不透明度改為 0%。這樣就實現(xiàn)了觸摸抬起的效果，可在預(yù)覽窗口中操作預(yù)覽。

細(xì)節(jié)調(diào)整

通過預(yù)覽會發(fā)現(xiàn)，浮窗消失的瞬間顯的有些卡頓，這是因為「浮窗元素」消失的速度比「取消浮窗元素」稍慢了一些。

解決的方法是：先選中「Window Touch Up」這條鏈接線，在它的 Animate 面板中，找到 Window 圖層的 Opacity (不透明度) 屬性關(guān)鍵幀，將 Opacity 的「結(jié)束關(guān)鍵幀」左移到 0.05 的位置，表示加快浮窗的消失速度。

通過再次操作預(yù)覽發(fā)現(xiàn)，浮窗消失的過程就比之前要流暢自然很多。如果想讓取消浮窗動畫更細(xì)膩，也可以再加入由 1-0 的縮放變化 (Scale)，因為篇幅有限，就不再展開敘述了。最后，整體預(yù)覽下最終的效果，沒有問題就可以準(zhǔn)備導(dǎo)出了。

第六步：導(dǎo)出 Gif 格式

最后，為了分享和展示我們的作品，常常需要把制作好的動效導(dǎo)出為 Gif，有兩種導(dǎo)出方式可以選擇：

1. 使用 Principle 直接導(dǎo)出

Principle 直接導(dǎo)出比較簡單。首先點(diǎn)擊預(yù)覽窗口右上角的 “錄影機(jī)” 圖標(biāo)，選擇「Touch Cursor」觸摸光標(biāo)，此時，“錄影機(jī)” 圖標(biāo)會不斷閃爍，表示正在錄制… 再次點(diǎn)擊該圖標(biāo)會停止錄制，同時會彈出保存面板，選擇「.gif」，點(diǎn)擊「Save」就可以導(dǎo)出 Gif 動圖了。

這里默認(rèn)導(dǎo)出的尺寸是 100%，你也可以選擇「Dribbble Retina 800w」，這樣就能直接導(dǎo)出為 Dribbble 作品尺寸了。需要注意的是：使用 Principle 直接導(dǎo)出 Gif 文件一般會比較大，不利于傳播和分享，建議使用下面第二種方式。

2. 通過 Photoshop 間接導(dǎo)出

在 Principle 彈出保存面板時，先選擇「.mov」，點(diǎn)擊「Save」導(dǎo)出 Mov 視頻格式；然后打開 Photoshop，選擇「文件-導(dǎo)入-視頻幀到圖層」，導(dǎo)入剛才的 Mov；最后 command+option+shift+s 存儲為 Web 所用格式。

在存儲面板中將「圖像大小」縮放至 50%，選擇 GIF 文件格式；如果文件較大，可以通過調(diào)節(jié)「損耗」和「顏色」選項來減小文件大小，一般小于 3M 最佳，但也要兼顧畫面不要太失真；設(shè)置好后，點(diǎn)擊「存儲」按鈕即可導(dǎo)出 Gif。

補(bǔ)充一點(diǎn)：

很多同學(xué)想知道如何導(dǎo)出帶手機(jī)模型的動效？

其實很簡單，首先需要提前將手機(jī)模型和背景圖制作好，以 jpg 或 png 的格式導(dǎo)入 AE；接著將錄制好的 Mov 格式動效導(dǎo)入 AE，調(diào)整尺寸大小和角度以適配圖片上的手機(jī)模型；最后從 AE 中合并導(dǎo)出 Mov，再通過 Photoshop 間接導(dǎo)出 Gif，具體步驟同上。

寫在最后

微信浮窗動效的制作到這里就結(jié)束了，大家可以結(jié)合視頻一起觀看，更重要的是練習(xí)，只有自己動手去做才會感受深刻！

理解原理后，遇到類似的動效就可以舉一反三了。

本文由 @Neil彭彭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供