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

效果如下：

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

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

第一步：Principle 導入 Sketch 文件

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

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

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

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

1. 拖拽開始

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

2. 拖拽結束

同樣的方法，我們在 Cancel 畫板中也選中浮窗元素，點擊閃電圖標后選擇「Drag End」，并將鏈接線指向 Moments 畫板，這樣拖拽交互就形成了開始到結束的閉環，可以在右側的預覽窗口中進行拖拽預覽。

3. 拖拽細節

Y 軸吸附效果

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

X 軸彈性動畫

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

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

第三步：制作取消浮窗進/出場動畫

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

1. 補間動畫

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

2. 添加細節

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

第四步：制作頁面遮罩轉場動畫

第四步比前幾步會稍微復雜一點，不過我相信也難不倒大家。

1. 添加點擊事件

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

2. 遮罩動畫

（1）遮罩進場

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

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

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

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

遮罩出場

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

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

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

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

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

1. 觸摸按下

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

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

2. 觸摸抬起

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

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

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

細節調整

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

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

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

第六步：導出 Gif 格式

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

1. 使用 Principle 直接導出

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

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

2. 通過 Photoshop 間接導出

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

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

補充一點：

很多同學想知道如何導出帶手機模型的動效？

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

寫在最后

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

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

本文由 @Neil彭彭 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖作者提供