本文主要是模擬微信文章的浮窗效果，并分為三個(gè)步驟來制作，一起來看看~

背景介紹：微信最近出了一個(gè)新的功能：文章浮窗。打開閱讀的文章，選擇了浮窗效果，就會懸浮在頁面上，單擊懸浮按鈕，會再次打開文章，免去了文章和聊天頁面之間來回切換的痛苦。

本次目標(biāo)：模擬微信文章的浮窗效果。

• 實(shí)現(xiàn) 1：點(diǎn)擊x符號，文章縮為懸浮按鈕；
• 實(shí)現(xiàn) 2：點(diǎn)擊懸浮按鈕，文章重新打開；
• 實(shí)現(xiàn) 3：整體效果流暢，相似度90%以上。

適合人群：具有一定Axure基礎(chǔ)的產(chǎn)品/交互人員。

學(xué)習(xí)時(shí)間：

• 新手：10~15min
• 一般：8~10min
• 高手：5~8min
• 骨灰：3~5min

頁面構(gòu)成：

事件構(gòu)成：

步驟1：頁面繪制

首先繪制靜態(tài)的聊天頁面和文章頁面，具體展示效果如下圖所示：

步驟2：文章轉(zhuǎn)浮窗

• 將靜態(tài)的文章頁面轉(zhuǎn)換為動態(tài)面板命名為：01_浮窗
• 給動態(tài)面板01_浮窗設(shè)置兩個(gè)狀態(tài)：文章、浮窗
• 文章狀態(tài)里面存放文章靜態(tài)頁面
• 浮窗狀態(tài)里面存放懸浮按鈕
• 為x符號設(shè)置點(diǎn)擊事件（參照上圖事件設(shè)置），具體設(shè)置如下：

• 注意縮小時(shí)，文章縮小的速度要比外框的快，這樣看起來，整個(gè)文章縮小的動作才是一個(gè)圓角矩形。

步驟3：浮窗轉(zhuǎn)文章

• 首先，單擊懸浮窗按鈕，切換動態(tài)面板狀態(tài)為文章
• 然后，設(shè)置文章的尺寸恢復(fù)到原來的尺寸大小375×667
• 恢復(fù)外框的尺寸為396×694且在文章完全恢復(fù)大小之前，隱藏外框
• 注意外框變大的速度要比文章的速度快，具體設(shè)置如下圖所示：

最終效果：

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

題圖來自 Pexels，基于 CC0 協(xié)議