下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

Axure教程十动态面板滑动效果

作者:课课家教育     来源: http://www.kokojia.com点击数:2594发布时间: 2019-03-15 16:38:54

标签: Axure教程滑动效果

     下面我们来学习一下Axure动态面板的滑动效果,滑动效果的触发条件,可以是点击按钮或者页面加载等条件出发,是与鼠标指针没有关系的。可以通过2种方法来表达,接下来我们会根据两种方式来实行讲解。

  首先准备需要的Axure元件:一个矩形元件、一个文本、一个动态面板,同样包含两个矩形,一个作为面板,一个作为登录启动的按钮给动态面板添加一个状态,给每一个元件都加上标签,准备工作就到此结束了。

  方法一:动态面板滑入滑出方式

  1、设置文本面板状态“登录”的onclick事件,把登录面板的动态面板滑动调到绝对位置(x,y)图一,x和y代表滑动到指定位置时的x轴坐标为320和y轴坐标为80的值(图二图三),坐标值可以通过拖动动态面板状态到指定位置取得。最后,设置动画效果为缓慢进入。Axure教程十动态面板滑动效果_Axure_教程_滑动效果_课课家图二图三  2、设置动态面板状态1里面的矩形登录按钮的onclick事件,将点击时动态面板滑动到绝对位置(x,y),这时的x和y代表滑动到初始位置时的x轴为320与y轴为-120的坐标值,设置动画效果为缓慢然后退出。

图四  3、点击鼠标右键设置顺序为置于底层,并将动态面板拖到初始位置状态上。

  4、第一种方式完成,可以生成原型看效果了(图四)。

  第二种:动态面板状态切换方式

  我们在开始时候呈给动态面板增加了一个一个状态,在第二种方法里起到作用,具体怎么做呢?我们继续讲解。

  1、把动态面板选项拖到最终显示的位置,将动态面板状态2上移到第一位置(图五)。

  2、设置登录面板的onclick事件,设置动态面板的状态为状态1,并设置进行动画为向下滑动。

      3、  设置动态面板状态1里面的矩形登录按钮的onclick事件,为点击时设置动态面板的状态为状态2,并设置退出动画为向上滑动完成后效果如下图。

GIF最终效果          总结:方法是不是很简单,其实所有操作都是在同一个状态面板上,前提我们需要先准备元件,然后对其坐标的X与Y轴进行参数设置,然后调慢动画状态,效果就出来了,看点动起手来尝试吧,想学习更多Axure的知识都可以来问我喔。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程