3分钟学会axure做微信红包领取下拉效果

3分钟学会axure做微信红包领取下拉效果_第1张图片

最近有朋友问我下拉然后弹回去的效果是怎么做的,偶然在抢红包的时候发现红包界面有这样一个功能然后就做了这样一个效果;

先上一下链接:https://vrp8nx.axshare.com大神请绕道。

接下来步骤:

1、先截一张反红包的截图,然后上传到电脑,用axure打开;

2、先插入一个iphone的元件(没有的自行百度)作为地图 点击右键排序—置放于最底层;

3、用裁剪工具将图片裁剪为2部分,姑且称为下半部分、上半部分;将下方图片转为动态面板(如下图所示);

3分钟学会axure做微信红包领取下拉效果_第2张图片

4、在动态面板图层下,先拖入1个矩形,用吸管工具填充为红包的红色,放于刚才图片裁剪的位置处,宽度和图片保持一致;

5、在拖入一个矩形,填充为红包图片下方的白色,然后将红包图片下半部分裁剪掉一部分;

6、接下来进入重点——交互效果:

(1):首先选中下半部分图片的动态面板,点击拖动时,选择垂直拖动,加上界限【⚠️注意:此处的边界主要是防止该面板可以垂直方向无限制地拉动,各位可根据图片的大小和坐标设置边界】

3分钟学会axure做微信红包领取下拉效果_第3张图片

(2):拖动时设置后,点击拖动结束时,移动选择为——回到拖动前位置 该步骤主要是当鼠标拖动结束时,图片回到原位置;

3分钟学会axure做微信红包领取下拉效果_第4张图片

以上。

最终的设计结构和交互如下图所示,快自己动手试试吧;

3分钟学会axure做微信红包领取下拉效果_第5张图片

如果对你有帮助辛苦点个赞,以后继续更新。

你可能感兴趣的:(3分钟学会axure做微信红包领取下拉效果)