产品邦

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[复制链接]
xingbb 发表于 2013-7-22 21:51:21 | 显示全部楼层 |阅读模式

立即注册,下载精品资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

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



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

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

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

先说实现过程:

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


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


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

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

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

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

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

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


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


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


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



本文出自 诉客 ▪ 产品经理的心声,转载时请注明出处及相应链接。
本文永久链接: http://www.soger.net/185.html



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|产品经理之家 ( 粤ICP备12078725号 )

GMT+8, 2024-4-19 13:40

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表