微信朋友圈天天用，感覺這種下拉動畫很多地方都有用到，不多說，just do it。

輕仿，還有很多細(xì)節(jié)沒繼續(xù)做，效果如下：

主要想法：面板拖動，移動/放大背景圖。

步驟如下：

1、畫狀態(tài)欄、標(biāo)題欄及底部欄、背景圖片bgImg（高度196），拖一個動態(tài)面板（主要用于限制頁面顯示區(qū)域）命名為頁面面板。

2、在頁面面板state1編輯頭像、名稱、占位符內(nèi)容，轉(zhuǎn)換為動態(tài)面板（內(nèi)部面板），拖動的就是這個內(nèi)部面板。

3、設(shè)置內(nèi)部面板的拖動事件：拖動時、向上拖動結(jié)束時、向下拖動結(jié)束時。

拖動時：

（1）垂直拖動內(nèi)部面板，設(shè)置拖動邊界限制。

（2）向上拖動距離小于50時，標(biāo)題欄透明。

（3）向上拖動距離大于50時，標(biāo)題欄透明度隨拖動距離變化。

（4）向下拖動時，改變bgImg高度，增加值等于拖動距離，左上角點（0,0）不變。

（5）向上拖動時，改變bgImg位置，左上角點跟隨面板的左上角點。

向上拖動結(jié)束時：

（6）如果bgImg的高度增加了，bgImg尺寸恢復(fù)，bgImg和面板位置恢復(fù)。

向下拖動結(jié)束時：

（7）如果bgImg的高度增加了，bgImg尺寸恢復(fù)，bgImg和面板位置恢復(fù)。

（1）至（7）具體設(shè)置如下：

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

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