Axure两种滑动效果

    作者:课课家教育2016-11-15 13:51:23

         通过对动态面板、函数、中继器、学习和交流对产品的一些看法。而我个人的观点是动态面板对应产品的交互设计、产品架构;函数对应产品的业务逻辑,判定等;中继器对应数据结构,数据类型等。下面跟我一起通过学习两种种Axure实现两种滑动的方式一边看一边加深对产品的理解吧。

      主要是通过动态面板来设置两种滑动方式。

      第一种:PC客户端,利用滚动条的方式,滑动鼠标滑轮就可以实现(注意观察图中的光标位置没有变化)。

    Axure两种滑动效果_Axure_滑动效果_教程_课课家

      第二种:移动端,准确来说应该叫拖动鼠标。通过按住鼠标左键,上下拖动,光标会一直在移动。拖动2

         上面就是两种滑动方式的最终效果,现在跟我一步一步学习,这个知识有可能在日常生活中也会用到,随时可以活学活用。

      一、PC滑动效果的实现:

      首先,我们需要一个很长的中继器大概是320*868规格,同样也可以用一张很长很长的拼图来代替,等同的一个道理。例如:用iphone5的页面尺寸(320*568),超过了页面尺寸,所以我们要来做一个滑动效果。然后我们在中继器的旁边,拖入一个动态面板规格在320*568。接下来,我们来设置一下动态面板的属性,滚动条——自动显示垂直滚动条为初始值面板就变成了下面这样:因为滚动条占据了一定的宽度,我们就把面板拉得宽一点点(具体根据需求来调整)然后将中继器放入动态面板(中继器坐标为0,0)中,如下图:中继器进入了动态面板

      然后我们按F5看看效果,试着将鼠标指针移入页面内,尝试上下滑动鼠标滑轮:这样就实现了滚动,有没发觉有一个滑轮有点不太理想?没关系,现在我们进行最后一步:在这个装有中继器的面板旁边,再添加一个面板320*568规格,这个面板目的作用就是遮住滚动条。最后再将右边装有中继器的面板放到左边的面板内,再点击键盘上F5按钮。是否发觉没有了滚动条?第一种滑动就学到这里。接下来还有一种种比较简单,也能模拟出常规的滑动效果,而且可以在手机端演示和使用。还有一种滑动,大家跟着我往下看。

      第二种:手机端,拖动滑动效果:

      我们在中继器320.868规格的旁边,拖入一个大小相同的动态面板,设置为左侧面板,右侧中继器,且大小相等面板尺寸也为320*868。然后将面板命名为:content,再将中继器拖入面板中,如下图:(动态面板的状态一修改为repeat)

      然后在装有中级器的动态面板旁,拖入一个动态面板,尺寸为显示界面的大小(320*568),命名为view。如下:

      再将装有中继器的面板放入到view320*568规格中并套入面板然后需要我们来添加边界,移动的垂直拖动,勾选配置动作的动态面板,垂直拖动然后确定。

      解释:在拖动view(320*568)的过程中其实是拖动content(320*868),所以我们要为content面板移动的距离添加边界。上边界下滑不能离开顶部,所以我们设置边界(顶部小于等于0),即上边界只能往上滑;下边界上滑的界限是content面板和view面板的底部在同一y轴,则其顶部的最高位置为(868-568),因为在负轴所以是-300。

      总结:两种滑动效果都是基于规格中进行,相比较第一种较给为第二种容易,PC客户端和移动端各有优劣,通过以上滑动效果你们有没有学到从中的技巧呢,没有的可以自己跟着步骤尝试一下,希望能帮助得到你,如果想学习更多Axure技巧也可以来向我咨或询关注课课家在线教育

课课家教育

未登录