小楼axure 图文教程(二十)动态面板拖动效果(函数DragX,DragY)

AxureRP6.5教程 小楼一夜听春语 17137℃ 0评论

今天是axure rp6.5新手教程的最后一节了,写了这么长时间,也不知道给大家帮上忙了吗?在这最后一节,把之前没有讲的两个特殊函数说一说。至于在这20章教程里面没有写到的东西,将会在axure7.0的教程里慢慢补全,敬请期待!

本教程案例原型下载:小楼axure 图文教程(二十)动态面板拖动效果(函数DragX,DragY)

今天的教程示例如下:

gaollg1

如图,是通过拖动任意一个面板,让另外一个面板镜像移动。

看似有些复杂的效果,其实非常简单就实现了。

首先介绍两个函数:

DragX:获取被拖动面板左右瞬时挪动的距离;

DragY:获取被拖动面板上下瞬时挪动的距离;

我们只需要在两个动态面板里各写上两个动作就好了。

左面的面板,我们当面板拖动时,将它设置为拖动状态,这样就能随意拖动了;

然后,让左面面板拖动的时候,右面的面板移动相对距离,因为我们是让两个面板上下方向(Y轴)同方向移动,而左右方向(X轴)朝相反的方向移动。所以在相对距离里面X轴我们要把DragX前面加上负号,这样就是反方向移动了。Y轴就直接获取DragY的函数值就可以了。

20-1

同理,我们在右边的面板上,也写上这两个动作,这样拖动右面板的的时候左面板也镜像移动了。

20-2

好了,让我们看看效果!

呵呵,axure 6.5教程完结,这周末之前,axure7.0教程就要开始和大家见面了,敬请期待!

我一定会回来的!!!!!!!!!!!!


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 小楼axure 图文教程(二十)动态面板拖动效果(函数DragX,DragY)

喜欢 (12)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 嗨~~泻璐茜来啦~~小楼 摆酒~~ 讲得还真是一目了然~~必须得赞个
    Lucyxie2013-10-10 17:25 回复
    • 小楼一夜听春语
      摆酒?你想干嘛?我不想干嘛!
      小楼一夜听春语2013-10-10 20:34 回复
  2. 哈哈哈 学了一招
    大虾米2014-07-29 11:52 回复
  3. 那可不可以在拖动的时候控制它拖动的范围,比如说拖动到一个位置就不能继续拖动了呢?还有就是想让它横向拖动,但是纵轴不变,这个可以做到吗?谢谢~
    jupter12072016-01-03 10:54 回复