Axure 实例 – 模拟 iOS 列表删除效果

最近有朋友问如何用 Axure 来模拟列表删除后的自动排序效果。其中所谓的「自动排序」是这样,假设一个三行列表,当删除第一行之后,后面的第二行和第三行可以自动上移,也就是第二行填补第一行的位置,第三行填补第二行的位置,然后以此类推。因此我做了一个实例,模拟了 iOS 的列表,其中的删除操作即可实现上述所说的效果。只不过鉴于我个人的癖好,在制作过程中尽量还原了 iOS 本身的各种效果。但是 Axure 毕竟不是开发工具,还是有一些效果是没办法实现的,所以各位在围观时大可走马观花,不必纠结完全的高保真效果。本例的重点在于如何实现「删除后的排序」效果,提供的只是其中一种思路,如果有更好的方法欢迎来信来函,共同探讨。

预览 | 下载

要求:
执行「删除」操作后当前列表消失,且后续列表自动上移补位。

详细的制作过程在这里就不细说了,直奔主题。首先拖一个 Dynamic Panel 用于存放所有的列表,目的在于其中的元素座标可以从 x0:y0 开始,这样在后续实现列表移位的时候便于计算。

然后把每一行列表都用 Dynamic Panel 打包,包括文案,删除按钮,间隔线…等等。因为这些都是列表的组成元素,与之共生共灭,打包进一个 Dynamic Panel 也是方便后续的 Action 编写。

接下来是重点,让一行列表在删除后消失,最直接的方法当然是用 Hide Panel 来实现,但还想实现补位式的排序,那么就需要用到 Move Panel 了。方法很简单,只要计算好每行列表的高度和当前的 y 值座标,就可以通过该命令来进行位置调整,其中 by 的意思是「移动 xx」,而 to 的意思是「移动至 xx」,两者都可以实现想要的效果,只不过用 by 更简单。例如例子中的每行列表的高度统一为 35px,所以这里只要将后续的列表设为 Move by y:-35 就可以了。 想要效果好看些,可以加一个短暂的 linear 动画,至于剩下的就是重复劳动了。

最后提一下例子中的那个「Reset List」按钮。该按钮是在所有列表都被删除后才会被激活,要实现该效果就需要设置一个变量来进行辅助。在页面加载时预先定义一个变量 varList,并赋值为列表的数量,本例中共有 8 行列表,所以 varList 的值为 8。

随后在每行列表的「删除」按钮中设置一个 Set Variable / Widget
value,意为每删除一行列表,则 varList 的值相应 -1。同时再添加一条带有条件的 Action,判断 varList 的值是否为 0。若为 0,则表示列表都被删除了,即可激活 「Reset List」按钮。最后别忘了在「Reset List」按钮中将 varList 再次赋值,否则下次就没效果了。

搞定,收工。

  • vincent

    能否发一下rp呢?邮件:810956505@qq.com

  • https://twitter.com/ruif 锐风

    必须这么复杂吗? 直接加上 overflow: hidden; 计算一下该项目的高度, 给它设置 height 值, 再用 transition 给 height 加个动画, 最后直接设置 height 为 0 不就完美搞定了吗?

  • joe

    请发一份RP文件,非常感谢!邮箱joe2@joe2.cn

    • http://24says.com 24Says

      已发,注意查收。

  • FradSer

    我最近在弄一个给自己用的模板,就是把这些功能全部整合在一个文件中,虽然不能完全实现一个app 但是适当的添加触发条件还是有模有样的,最大的难题在于如何整理各个dynamic panel 和state 之间的逻辑关系和如何转化的过程,感谢博主提供的思路,尤其是变量的控制实在是帮大忙了。

  • guozhongtao

    麻烦发一下axure实例教程中的rp文件,万分感谢!邮箱 13061009@cnsuning.com

  • Shunz

    赞,思路清晰,请发一份rp学习,谢谢!

    • http://24says.com/ 24Says

      发到你邮箱了,注意查收。