国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

頁(yè)面構(gòu)成：

事件構(gòu)成：

步驟1：頁(yè)面繪制

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

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

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

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

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

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

最終效果：

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

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