小楼axure 图文教程（十六）微信摇一摇效果

小楼一夜听春语

作者: 小楼一夜听春语
本教程axure原型百度云盘下载：小楼原创原型-微信摇一摇效果中国人看帖请回帖支持作者！
本文出自 诉客 ▪ 产品经理的心声，转载时请注明出处及相应链接。
本文永久链接: http://www.soger.net/185.html

本来是想借着这个axure原型效果写一下拖动面板后通过变量让其他面板联动的的效果，结果做到一半，想起来，这个联动效果不用拖的，而是移动面板，糗P了。既然做了，就做下去吧，结果又碰到了一个软件的bug。我勒个去！
说一下这个axure6.5中 的bug，就是无论你在动态面板的哪个事件（拖动开始，拖动时，拖动结束）中，只要设置了变量值，那么在这些事件中的内部框架加载页面就会失效。本来简单实现的功能，又不得不在框架上加了一个动态面板状态。
其实在这个效果中，实现方法没什么值得过多说的，不过有些值的我们注意的地方是很有价值的。
先说实现过程：
我的想法是这样的，先说内容页，内容页在主页加载时就要加载到内部框架里，但是不能动，当摇动结束时，重新加载内容页，这时候再让它动。为了实现这个效果就要加个变量作为开关，主页加载时没有变量，这时候加载内容页就可以通过内容页的onloadpage事件判断变量没有值不作任何动作。当摇动结束时，给变量赋值，并且重新加载内容页，这个时候在内容页的onloadpage事件中就能判断变量被赋值，执行动态的效果。

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

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

我想法很傻很天真，bug伤了我的心。内容页对我的变量无动于衷，一副冷淡的样子。好桑心，好桑心！！！
没办法，只好在主页加了一张内容页的图片并转成了动态面板，让它默认显示，拖动结束时隐藏，拖动时再显示。这样拖动结束时内容页就可以直接加载并显示动态效果了。

我又错了，被axure给轮了。我执行时候惊讶的发现，因为有动作执行的先后顺序，下半部分滑动一会儿，上半部分才开始移动。MLGBD，玩儿我！！！
最终我想出了办法，不写成顺序执行的动作了，而是把下半部分单独设置成内容页加载时移动。

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

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

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

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

weslywang

楼主大人万岁