小楼axure 图文教程(十六)微信摇一摇效果

AxureRP6.5教程 小楼一夜听春语 13398℃ 0评论

本教程axure原型百度云盘下载:小楼原创原型-微信摇一摇效果

 

 

本来是想借着这个axure原型效果写一下拖动面板后通过变量让其他面板联动的的效果,结果做到一半,想起来,这个联动效果不用拖的,而是移动面板,糗P了。既然做了,就做下去吧,结果又碰到了一个软件的bug。我勒个去!

说一下这个axure6.5中 的bug,就是无论你在动态面板的哪个事件(拖动开始,拖动时,拖动结束)中,只要设置了变量值,那么在这些事件中的内部框架加载页面就会失效。本来简单实现的功能,又不得不在框架上加了一个动态面板状态。

其实在这个效果中,实现方法没什么值得过多说的,不过有些值的我们注意的地方是很有价值的。

先说实现过程:

我的想法是这样的,先说内容页,内容页在主页加载时就要加载到内部框架里,但是不能动,当摇动结束时,重新加载内容页,这时候再让它动。为了实现这个效果就要加个变量作为开关,主页加载时没有变量,这时候加载内容页就可以通过内容页的onloadpage事件判断变量没有值不作任何动作。当摇动结束时,给变量赋值,并且重新加载内容页,这个时候在内容页的onloadpage事件中就能判断变量被赋值,执行动态的效果。

 

那么过程就应该是在主页放上手机外壳元件,里面放个框架,然后把他们一起转换成动态面板,在打开主页时,就把摇一摇的界面加载到框架里,在拖动这个动态面板时,让面板可以随意拖动(摇一摇),当拖动结束时,给指定的变量复制,并把内容页重新加载到框架。、

 

内容页由四个动态面板(上半部分,上半部分的下边框,下半部分、下半部分的上边框)、一个背景图。当内容页被加载时,通过判断变量符合条件,让上半部分和下半部分分别向不同的方向移动相同的距离,并让两个边框分别跟随移动就可以了。这部分可能有点儿乱,各位同学可以打开原型把内容页的构成元件都拉开,就能明白了。

161

我想法很傻很天真,bug伤了我的心。内容页对我的变量无动于衷,一副冷淡的样子。好桑心,好桑心!!!

没办法,只好在主页加了一张内容页的图片并转成了动态面板,让它默认显示,拖动结束时隐藏,拖动时再显示。这样拖动结束时内容页就可以直接加载并显示动态效果了。

162

我又错了,被axure给轮了。我执行时候惊讶的发现,因为有动作执行的先后顺序,下半部分滑动一会儿,上半部分才开始移动。MLGBD,玩儿我!!!

最终我想出了办法,不写成顺序执行的动作了,而是把下半部分单独设置成内容页加载时移动。

163

然后点击下半部分,在它的“移动面板时”事件中,加入了上半部分动态面板的滑动动作。

 

看不懂就看原型吧,没勇气再想被轮的经过了。

 

最后,终于在不泄的努力下,完成了整体效果。

 

补充一点,滑动效果用的是“线性”,这样就是匀速的滑动。如果用“缓慢进入”、“缓慢退出”会有加速、缓冲的效果,就不是匀速滑动了。

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » 小楼axure 图文教程(十六)微信摇一摇效果

喜欢 (6)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 头像
    请问上下边框有什么作用呢?我把这两个去掉后效果看起来是一样的啊。。。
    silzen2014-05-30 14:03 回复
  2. 头像
    小楼 好帅咩╮(╯_╰)╭。网址失效了,请发一个链接给我,谢谢!
    shoney2017-06-15 10:44 回复