Axure8.0实现推拉模块效果

背景介绍
日常的网站设计中,经常会遇到鼠标移入某一区域,显示隐藏内容,这样一个效果,(具体可参照下图)。

tuila
tuila

功能说明
推拉效果是Axure中比较常见的一种效果,利用动态面板的显示和隐藏属性即可实现。推拉的形式分为两种,一种是不带动画的效果,第二种是带动画的效果,对于不带动画的效果,实现方式很简单,这里不做具体的陈述,接下来主要给大家介绍一下,怎么样无bug的实现带动画的推拉效果。
实现步骤
1、找到bug出现的原因:
经过测试,不带动画的推拉没有bug,带动画的推拉有bug,两者的区别之处如下面两幅图所示:
b-animation
b-animation

** 不带动画 带动画**
经过比对,发现问题就出现了时间上,因为有了500ms的时间误差,导致鼠标来回切换过快的话,就会出现越推越远,或者越拉越近的现象,要想避免出现这种情况,就必须判断鼠标来回移动的时间。
2、解决bug
当鼠标移入时,标记当前的时间为t,当鼠标移出时,标记当前时间为t1,则时间差计算公式为:t(时间差)=t1-t,令t(时间差)和500ms进行比对,只有当t(时间差)大于500ms时,才正确,否则给出错误提示。
3、依照理论探究的方式进行实践
获取当前时间的公式:Now.gettime()
源文件下载地址
推拉效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,008评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,198评论 4 61
  • 整理笔记时发现,原来我曾经是个读书还要用功做笔记的人……,不过有些挺有趣的,摘些来分享吧! •关于<哈利波特>中的...
    相楚阅读 225评论 0 1
  • 打开手机“市内交通查询”的网页,找到了从家里到花鸟市场的路线。 天灰蒙蒙的下着小雨,公车上很多人,很挤。找一个位置...
    艾力儿阅读 303评论 0 2