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

效果如下：

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

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

第一步：Principle 導入 Sketch 文件

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

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

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

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

1. 拖拽開始

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

2. 拖拽結束

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

3. 拖拽細節(jié)

Y 軸吸附效果

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

X 軸彈性動畫

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

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

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

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

1. 補間動畫

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

2. 添加細節(jié)

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

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

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

1. 添加點擊事件

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

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 畫板至于最底部。為了避免交互錯亂的情況出現(xiàn)，我們選中 Moments2 畫板與其他畫板的鏈接線 （Window Tap 和 Window Drag Begins），依次右擊選擇「Delete Event」刪除它們。

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

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

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

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

1. 觸摸按下

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

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

2. 觸摸抬起

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

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

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

細節(jié)調整

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

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

通過再次操作預覽發(fā)現(xiàn)，浮窗消失的過程就比之前要流暢自然很多。如果想讓取消浮窗動畫更細膩，也可以再加入由 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 文件格式；如果文件較大，可以通過調節(jié)「損耗」和「顏色」選項來減小文件大小，一般小于 3M 最佳，但也要兼顧畫面不要太失真；設置好后，點擊「存儲」按鈕即可導出 Gif。

補充一點：

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

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

寫在最后

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

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

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

題圖作者提供