您的位置: 主页 > Axure教程:如何实现爱彼迎App首页Banner的切换效果

Axure教程:如何实现爱彼迎App首页Banner的切换效果

  本文分享一个用Axure实现爱彼迎App首页Banner切换效果的方法,供大家参考,欢迎一起交流。

  作者最近闲暇时间试着将爱彼迎App的Banner切换效果用Axure实现出来,网上类似的教程不多,所以给大家分享一下。本文没有将每一个步骤分享出来,而是提供一个实现的思路。对Axure的初学者来说可能有点难懂,后面会提供源文件下载。

  4. 左右拖动时,限制页面上下拖动;上下拖动时,限制Banner左右拖动(见下图)

  因为该Banner区域即能左右拖动,切换Banner,也能上下拖动进行页面的拖动,所以如果不做限制,则会出现拖动时Banner与页面同时移动的情况。

  需要处理的几个需求点明确了,再就是如何通过Axure的函数功能来实现了。本文会用到以下几种函数:

  本文先把四个需求的拖动事件和拖动结束事件拆分开,最后会把四个需求的事件写在一起。

  拖动阻尼效果其实就是随着水平拖动距离(x轴)的增加,Banner的移动距离(Y轴)增量减少。见下图:

  这个函数关系可以用函数实现。尝试了几个函数,发现函数y=4*x^(0.5)图像基本满足要求。

  在右侧的时候,阻尼的效果在Banner模块往左拖动时出现,所以其TotalDragX的值会是负数,需要加上绝对值函数。

  拖动结束时,通过判断Banner模块的X坐标来定义归位的Banner位。

  可通过鼠标拖动的距离和拖动的时间来判断。此时需要加入全局变量来记录当前Banner模块的位置数(后面会用到)。

  至此,Banner模块的拖动事件以及拖动结束时间基本就可以写全了。合并后如下:

  本文没有贴源文件的用例截图,而是将思考的步骤拆分出来一步步地得到所需的结果(希望大家能看明白,作者注),欢迎一起交流学习,有什么问题建议可以留言。后期有时间再做更多的效果出来分享给大家!

  原型下载链接:(上传的原型文件不是完全与这次分享一致,作者后续又加了点特效,Duang!而且作者画图喜欢用动态面板封装母版,层级较多)

上一篇:internet首页被强制更改怎么改成默认?
下一篇:京东理财一直不能赎回小金库

您可能喜欢

​淘宝首页流量来源你清楚了吗?

​淘宝首页流量来源你清楚了吗?

​强制修改主页的方法

​强制修改主页的方法

​跨境电商智能服务平台

​跨境电商智能服务平台

​淘宝网首页登陆

​淘宝网首页登陆

回到顶部