微信朋友圈天天用,感觉这种下拉动画很多地方都有用到,不多说,just do it。
轻仿,还有很多细节没继续做,效果如下:
步骤如下:
1、画状态栏、标题栏及底部栏、背景图片bgImg(高度196),拖一个动态面板(主要用于限制页面显示区域)命名为页面面板。
2、在页面面板state1编辑头像、名称、占位符内容,转换为动态面板(内部面板),拖动的就是这个内部面板。
3、设置内部面板的拖动事件:拖动时、向上拖动结束时、向下拖动结束时。
拖动时:
(2)向上拖动距离小于50时,标题栏透明。
(4)向下拖动时,改变bgImg高度,增加值等于拖动距离,左上角点(0,0)不变。
(5)向上拖动时,改变bgImg位置,左上角点跟随面板的左上角点。
向上拖动结束时:
(6)如果bgImg的高度增加了,bgImg尺寸恢复,bgImg和面板位置恢复。
向下拖动结束时:
(7)如果bgImg的高度增加了,bgImg尺寸恢复,bgImg和面板位置恢复。
(1)至(7)具体设置如下: