Axure教程：轻仿朋友圈下拉动画

2018-10-1210:07:22原型设计Comments2,440 views字数 450阅读模式

轻仿，还有很多细节没继续做，效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

主要想法：面板拖动，移动/放大背景图。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

步骤如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

1、画状态栏、标题栏及底部栏、背景图片bgImg（高度196），拖一个动态面板（主要用于限制页面显示区域）命名为页面面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

2、在页面面板state1编辑头像、名称、占位符内容，转换为动态面板（内部面板），拖动的就是这个内部面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

3、设置内部面板的拖动事件：拖动时、向上拖动结束时、向下拖动结束时。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

拖动时：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（1）垂直拖动内部面板，设置拖动边界限制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（2）向上拖动距离小于50时，标题栏透明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（3）向上拖动距离大于50时，标题栏透明度随拖动距离变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（4）向下拖动时，改变bgImg高度，增加值等于拖动距离，左上角点（0,0）不变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（5）向上拖动时，改变bgImg位置，左上角点跟随面板的左上角点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

向上拖动结束时：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（6）如果bgImg的高度增加了，bgImg尺寸恢复，bgImg和面板位置恢复。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

向下拖动结束时：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（7）如果bgImg的高度增加了，bgImg尺寸恢复，bgImg和面板位置恢复。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

（1）至（7）具体设置如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/6560.html

Axure高保真教程：制作书本翻页效果