Axure教程 动态面板滑动效果(10)

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

示例原型:http://pan.baidu.com/s/1mgjYahi

实现目标:

1、  点击登录滑出登录面板

2、  点击确定滑出动态面板

最终效果如下:

gaollg1

这种效果可以通过两种方法实现:

首先准备需要的元件:1个矩形,1个文本,1个动态面板(里面包含2个矩形,一个作为面板,一个作为登录按钮)

把动态面板添加一个状态,准备工作就结束了。

注意:每个主要元件记得加上标签啊!

 

第一种:动态面板滑入滑出方式

1、  设置文本面板“登录”的onclick事件,为点击时动态面板滑动到绝对位置(x,y)(如图1),x和y代表滑动到指定位置时的x轴与y轴的坐标值(如图2、图3),坐标值可以通过拖动动态面板到指定位置取得。最后,设置动画效果为缓慢进入。

图1

4-3

图2

4-1

图3

4-2

2、  设置动态面板状态1里面的矩形登录按钮的onclick事件,为点击时动态面板滑动到绝对位置(x,y)(如图4),这时的x和y代表滑动到初始位置时的x轴与y轴的坐标值,设置动画效果为缓慢退出。

图4

4-4

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

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

 

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

在开始的时候我们给动态面板增加了一个状态,在第二种方式里它才会起到作用,怎么做呢?我们继续:

1、  把动态面板拖到最终显示的位置,将动态面板状态2上移到第一位(如图5右侧指示);

2、  设置文本面板“登录”的onclick事件,为点击时设置动态面板的状态为状态1,并设置进行动画为向下滑动(如图5);

图5

4-5

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

4、  第二种方式完成,生成原型就能看到想要的效果了。

 

本文作者:@小楼;转载自:Axure原创教程网

新手入门基础教程目录

Axure教程 axure新手入门基础(1)

Axure教程 axure新手入门基础(2

Axure教程 axure新手入门基础(3)

Axure教程 axure新手入门基础(4)

Axure教程 axure新手入门基础(5)

Axure教程 关于Axure rp触发事件中IF和ELSE IF的使用说明(6)

Axure教程 axure元件使用思路的补充(7)

Axure教程 动态面板的用途(8)

Axure教程 带遮罩层的弹出框(9)

Axure教程 动态面板滑动效果(10)

更多Axure学习技巧:Axure专栏

您的赞赏,是对我创作的最大鼓励。

评论( 16

登录后参与评论
  1. :arrow: 图真的看不见

    回复
  2. 看不懂,我知道看不懂是我的不对,你好心还弄个教程,但是可以不要这么简笔好嘛,大神

    回复
  3. 诶,真的好难看懂

    回复
  4. 挺不错的,看了几分钟,感觉没那么难。

    回复
  5. 链接失效。。

    回复
  6. 初学者,看完朦朦胧胧,希望可以有视频教程,看起来更加直观、、

    回复
  7. 还是上视频吧,这样的效果体验很差。

    回复
  8. 这教程有点坑爹啊、。。。

    回复
  9. 还行,就是动态的哪个效果没闹明白

    回复
  10. 这样说,不如不说

    回复
  11. 除了图片有点小,别的都挺好,不过还是学会了[嘻嘻]

    回复
  12. 写的不清不楚的,对初学者没任何帮助

    回复
  13. 图真的太小了

    回复
  14. 作者说了半天也没说明白,其实第一种做法是用动态面板从视野看不见的地方滑进我们的视野,第二种则是利用了动态面板自身显示时所带的滑出动作。真是的,小楼这家伙不说明白,图也这么小,为了他那个入门到精通的视频其用心显得也忒小了吧

    回复
    1. 回复

      总结的精辟, :mrgreen:

  15. 挺好,学习了

    回复
加载中