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

Nairo
17 评论 263509 浏览 91 收藏 5 分钟

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

实现目标:

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

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

最终效果如下:

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

首先准备需要的元件: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专栏

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 写的虽然不是特别具体,但是认真看一下,跟着思路肯定可以做出来啊。楼上在那哔哔的同学学习能力需要提高啊,这点自学能力还是要有的

    来自湖北 回复
  2. ➡ 图真的看不见

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

    来自四川 回复
  4. 诶,真的好难看懂

    来自浙江 回复
  5. 挺不错的,看了几分钟,感觉没那么难。

    来自广东 回复
  6. 链接失效。。

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

    来自北京 回复
  8. 还是上视频吧,这样的效果体验很差。

    来自北京 回复
  9. 这教程有点坑爹啊、。。。

    来自北京 回复
  10. 还行,就是动态的哪个效果没闹明白

    来自北京 回复
  11. 这样说,不如不说

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

    来自河南 回复
  13. 写的不清不楚的,对初学者没任何帮助

    来自河北 回复
  14. 图真的太小了

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

    来自新疆 回复
    1. 总结的精辟, :mrgreen:

      来自江苏 回复
  16. 挺好,学习了

    来自北京 回复
专题
15525人已学习13篇文章
作为一种软件开发工具,低代码平台一定程度上提升了企业的软件开发效率,适应了整体的数字化发展趋势。本专题的文章分享了关于低代码的讲解。
专题
55582人已学习12篇文章
据说70%的问题都是沟通问题,沟通能力对产品经理太太太重要了。
专题
14269人已学习12篇文章
人力资源管理系统,帮助企业管理和维护其人力资源。本专题的文章分享了人力资源管理系统的设计指南。
专题
13195人已学习12篇文章
本专题的文章分享了系统首页设计指南。
专题
20094人已学习13篇文章
什么是中台?为什么要建中台?中台建设的切入点在哪?本专题的文章将提供这些问题的解答。
专题
13630人已学习14篇文章
好的产品是对人性的窥视,无论是做产品,做运营,懂点心理学还是很有帮助的。本专题的文章分享了消费者心理学。