元件尺寸改变与旋转

AxureRP8.0教程 小楼一夜听春语 2911℃ 0评论

这一篇教程,我们一起来了解AxureRP8中元件尺寸改变与旋转的使用。

我为大家准备了三个交互效果。

昨晚很爽!

不是...是做完很爽!

艹...好像也不太对!

弄出来很爽?

算了...语言简直无法表达我的心情!

先来看第一个交互效果!

嗯嗯,有没有打它的想法?

来看看怎么实现吧!

放心,不用什么系统变量或函数!

这个实现方法简单的令人发指!

目的是飞机要绕着一个中心点进行旋转。

如果用计算的方法,那就复杂了,角度、半径、坐标还有圆周率一个都不能少,还要用到循环。

换个思路!

在AxureRP8中元件的旋转动作是能够自转的。

可能大家不知道,不仅仅是元件,组合和动态面板也是能旋转的。

那就简单了!

看元件准备,你就明白我为什么这么说了!

看到了吧!

一个矩形,在它的顶部放了一个飞机图标(在软件自带的Icons元件库中),然后把这两个元件组合(Ctrl+G)到了一起。

看到这里我想大家应该明白了,我们让这个组合不停旋转就好了。

怎么旋转呢?

1、组合“FlyGroup”的【更多事件】中找到【载入时】,添加交互动作【旋转】“当前元件”【经过】“360”度,动画选择【线性】,时长为“5000”毫秒。

但是这样只能旋转一周,如何不停地旋转?

2、组合“FlyGroup”的【更多事件】中找到【旋转时】,添加交互动作【旋转】“当前元件”【经过】“360”度,动画选择【线性】,时长为“5000”毫秒。

旋转时旋转,就是不停的旋转!

到这里,我们看到的交互效果就完成了!是不是很简单?

注意:这里是为了让大家了解组合可以旋转,并做为下方的第二个交互的基础。实际上还可以更简单,大家可以试试画布中只放入一个飞机图标,如果让这个飞机围绕着右侧100个像素的位置为中心点旋转的话,【旋转】动作的设置中,把锚点偏移【x】设置为100即可。如果围绕左侧某一点旋转,锚点偏移【x】设置为负值。以此类推,锚点偏移中的【y】是决定垂直方向中心点位置的。

那再来看一个!

嗯,没错,也是旋转!

但是有一点不同,里面的四个小圆形的文字一直是保持同一角度。

实际上,原理说破就很简单!

组合顺时针转,小圆形逆时针转,这样就可以实现了。

但是你会发现效果不对!

给小圆形加上了【载入时】和【旋转时】的交互之后,小圆形根本不动!

什么原因呢?

打个比方,在一个旋转的大圆盘上,粘上四个小圆盘,大圆盘能够自转,但是因为小圆盘粘住了,所以小圆盘只会公转而不会自转。

组合就好像把多个元件粘在一起。

那么,怎么让小圆形也能转呢?

还是刚才的比方,我们在大圆盘上粘上一个透明的玻璃箱子,把小圆盘放在箱子里,这样的话大圆盘自转的时候,小圆盘能够跟随着公转,但是因为小圆盘没有粘在大圆盘上,被箱子隔开了,所以它自己也可以自转。

这里大家看一下元件组成,基本就明白了。

最后,我们再来看一个交互效果。

这个是模拟音乐播放的波形。

这样的效果,原理是让每一个黑色的矩形不停的随机改变自身尺寸。

上面我们打飞机的时候,不是...,是研究飞机的时候,原理是旋转时旋转。

而这个交互的原理是改变尺寸时改变尺寸。

知道了原理就简单了。

不过,这里我们需要用到一个函数:Math.random()

随机数函数能够取到0~1之间的随机小数,用这个随机数乘以矩形的最大长度就可以得到我们想要的随机尺寸。

我们先准备元件。

就两个矩形,把它们底部对齐。

纯黑色的是需要改变尺寸的,另外一个更长的矩形是做背景的,它的尺寸(高度)是200px。

接下来,我们就让这个黑色的棒棒,不停的变长或者变短。

在黑色矩形的【载入时】添加交互,动作是【设置尺寸】“当前元件”,宽度保持不变,高度中填写“[[Math.random()*200]]”(注意两侧要有双方括号),动画选择【线性】,时长为“100”毫秒。

然后,把这个动作复制(Ctrl+C),在黑色矩形的【更多事件】中,找到【尺寸改变时】,点击后方的粘贴。

这样,我们就完成了交互的设置。

最后,把做好的两个矩形全选复制成多个并摆放整齐。

到这里,我们就完成了以上所看到的三个交互效果的制作。

强调一点,通过趣味性案例帮助用户理解思路分析与相关知识点是本站教程实际目的。

推荐关注:本站微信订阅号“iaxure”(二维码在本站页面右上方),及时获取本站最新动态内容。

源文件下载:【点击下载


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

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

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


转载请注明:Axure原创教程网 » 元件尺寸改变与旋转

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 为什么做了底部锚定,为什么还是或网上移动
    张博宇2018-01-26 16:34 回复
  2. 还是小楼老师会打飞机,不对是玩飞机
    张宇博2018-03-07 13:05 回复
  3. icons旋转的案例在rp8.0软件里,旋转一会,然后就不以中心旋转了
    ggg2018-05-11 17:55 回复
  4. 小楼老师,为什么动态面板不可以包住大圆的
    喜喜2018-06-28 16:24 回复