一、微信的懸浮窗交互效果
微信更新后，發現多了個懸浮窗功能。公眾號閱讀，網頁瀏覽回退后默認會出現。再點擊，可以回到剛才閱讀的地方。於是，再也不會遇到回復老婆的信息，再切換回來重新找剛才閱讀東西的麻煩了。我個人覺得是很有用的一個功能。
其交互效果，也被不少人稱贊。
例如，窗口會收縮到懸浮按鈕中，懸浮按鈕可以拖到右下角取消浮窗。
這些交互效果呢，是要web前端技術也是可以實現。
這不，我就試了下，寫demo加調試1個小時就搞定了。
您可以狠狠地點擊這里：微信網頁懸浮窗交互demo
交互說明
如果你是桌面瀏覽器訪問的頁面，請打開開發者工具在移動模式下瀏覽。
向右滑動頁面，可以看到類似下面效果：
此時，釋放手指（或鼠標），則移動的頁面就會收縮到浮層按鈕中。
再點擊這個懸浮按鈕，則頁面又會以遮罩形式圓形展開，GIF如下：
二、效果實現的關鍵
效果實現的關鍵是頁面收縮到懸浮按鈕中。
使用的是CSS3 clip-path屬性。
關於CSS3 clip-path屬性入門，可以參考我之前的文章：“CSS3/SVG clip-path路徑剪裁遮罩屬性簡介”。
其中，有個demo差不多就把這個收縮效果的“形”給實現了。
效果如下GIF：
在模擬微信這個demo中，我也是使用的圓形剪裁，語法為：
.example {
clip-path: circle(radius at x, y);
}
radius表示剪裁半徑大小，x, y指剪裁的圓心坐標。
在本demo中，由於是相對於懸浮按鈕中心剪裁，本身頁面也會跟隨手指拖動，因此，radius以及x, y都是動態的，這個是交互難點所在。
具體實現可以參見demo頁面源代碼，非常不錯的學習材料，代碼很干凈，專為實現這個效果寫的，沒有什么冗余，還附帶注釋。
這里有轉折
后來，我又仔細看了下微信這里的效果實現，發現自己用錯了，看上去使用的是橢圓剪裁，而不是圓形剪裁，也就是要使用ellipse，語法如下：
.example {
clip-path: ellipse(radius-x, radius-y at x, y);
}
懶得改了，反正效果就是示意下。用圓形也好，回頭用在實際項目中，被別人罵抄襲的時候可以被罵得輕一點，因為畢竟還是有不一樣的地方的。
三、其他交互效果的實現
上面demo提供的是主交互，整個懸浮框效果還包括其他一些效果，包括懸浮按鈕拖來拖去，包括移動到右下角可以取消浮框，別擔心，也很好搞定。
1. 懸浮按鈕拖來拖去還吸邊
關注我文章的小伙伴應該知道我之前分享過一個比這個效果還要好的懸浮吸邊按鈕交互實現，效果是下面這樣的——帶物理碰撞。
截圖掉幀，訪問這個地址：https://m.qidian.com/，手機模式下，可以親自感受下。
代碼直接開源了：https://github.com/yued-fe/inertia
使用也很簡單：
①. 引入JS文件，例如：
<script src="Inertia.js"></script>
②. 綁定
new Inertia(ele);
然后恭喜你，效果就有了！
2. 拖拽出現取消浮窗按鈕並有交互響應
這個效果之前也介紹過，應該說出現過，源自“基於HTML5 drag/drop實現模塊拖動插入排序刪除”這篇文章。
其中的刪除和微信這里的浮框刪除非常類似。
拖動，刪除按鈕出現，移動到刪除按鈕上，刪除按鈕有交互變化：
demo體驗地址可以戳這里：拖拽實現模塊插入排序刪除
相關交互JS代碼可以見頁面源代碼。
四、最后來個總結
開頭1個主demo，加1個開源小組件，外加1個刪除demo，這3個實例就能把微信懸浮框交互效果基本覆蓋，相信大家功能實現都不會有什么壓力，代碼都有，順着邏輯改改人人都能做得很好。
但是呢，功能雖然有，但是，最后的動畫實現細節你要做得微信那樣，跟你講，你還要花額外一半的時間，而這額外一半的時間，實際上就是偏體驗前端技術人員的層次分水嶺。
舉個例子，本文一開始那個demo例子，1個小時弄好的，但是如果你想真正用在線上，估計還要再花一兩個小時時間，如果你是一個對交互效果，對用戶體驗非常有追求的人。
我就隨便舉兩點說明：
- 網頁收縮到浮窗按鈕的時候，網頁本身實際上是有一個整體逐漸變成中灰色的動畫的，這個可以借助一個灰色蒙層覆蓋然后透明度0-1變化實現。我實現的時候就偷懶了，直接用了個灰度濾鏡。從效果上來講，還行，如果不是特別敏銳的用戶，這個效果也還過得去。但是如果你是追求那種非常自然的動畫效果的話，色調也應該是完美過渡，那真的就要想辦法網頁整體變灰色，而不是灰度，通常，越追求效果，最追求細節，所花費的時間和精力也越多。50%的時間和精力可以實現80%的效果，而想要繼續10~20%的完美效果，則還需要50%的精力。
- 網頁從懸浮按鈕恢復的時候，微信的實現背后只有黑色或者深灰色兜底層的。而我實現的時候又偷懶了，頁面擴散時候，邊角是透明的，直接鏤空了下面的頁面信息。實現就沒微信的細致。
什么是好的交互？就是用戶用起來無感知的交互，讓用戶覺得理所當然，應該是這樣子的。但是要做到這一點非常難，就拿交互動畫效果來說，一個頁面收縮到一個小按鈕中，最后實現的效果要想“理所當然”，無論是位置，尺寸，還是透明度，色調，其過渡效果都要非常自然才行，只背后都要花費很大的時間和精力的，尤其是一個以前別人都沒實現過的效果。
所以，當我們誇獎一個產品交互體驗做的非常好的時候，那背后一定是付出了很多心血才有的結果，產品重視且有推動，開發有技術有追求。從這一點開看，產品體驗本身是一個很難被競爭對手逾越的競爭點。
感謝閱讀，歡迎交流！
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7662
本文可全文轉載，但需要同時保留原作者和出處。