快来!帅帅的小楼哥哥带你一起开车去!

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

emmmmmm......

我要开车了!

案例效果图:

交互说明:

在页面打开时,浏览器底边上出现了一辆黑车,点击这辆黑车,黑车开到了屏幕的右侧停下。

看上去,应该不复杂。

分析一下!

1、点击黑车的时候,黑车要移动到浏览器右侧;

2、黑车移动时,轮子要转动,转动的圈数要与移动距离相匹配;

3、黑车要在浏览器底部出现。

4、不管浏览器窗口多大,以上效果都要有效。

这次感觉很复杂了吧?

没关系,我们一点一点深入进去,过程就没那么痛苦了!

实际上,我们已经分析了交互的组成。现在要做的就是准备元件。

当然,在我提供的源文件中有一个黑车的图片,不过,我建议把这张图片单独留下,我们一起从头做起。

一、准备元件

1、从留下的黑车图片中,取出车轮部分。

在顶部工具栏,我们点【更多】,使用裁剪工具获取车轮图片。

2、选取车轮部分,复制出车轮的图片。

3、将复制到的车轮图片,粘贴到画布中,拖动图片左上方的小三角,将图片变为圆形图片。

4、将车轮图片复制为两个,然后摆放在合适的位置,并且进行命名。

5、全选所有的元件,统一调整尺寸,这里我设置的宽度是240,高度保持宽高比例即可。

6、把所有元件组合到一起,并命名。然后在组合上点击鼠标右键,选择【转换为动态面板】,并命名。

如果,想让黑车页面打开时,就在底部出现,我们可以在动态面板“CarPanel”的属性中,设置【固定到浏览器】,将面板固定在页面的【左】【下】方。这也是转换为动态面板的原因,因为动态面板才能够进行固定到浏览器的设置。

二、添加交互

1、实现黑车移动

为组合“CarGroup”添加【鼠标单击时】的用例,设置动作为【移动】,移动【当前元件】或组合“CarGroup”【到达】一个指定的位置。

因为,组合“CarGroup”在动态面板中的y轴坐标是“0”,所以y轴不需要设置。

而x轴,我们需要计算。

浏览器的宽度不是固定的,我们可以通过系统变量“Window.width”进行获取,浏览器宽度减去黑车自身宽度就是要移动到的x轴的位置。所以,x轴最终的计算公式是:[[Window.width-This.width]]。

最后,再为移动添加【线性】动画,时间设置为“3000”毫秒。

2、实现车轮转动

车轮转动多少,取决于移动的距离、车轮的周长。

移动的距离,我们能够通过刚才的“Window.width-This.width”算出,那么车轮的周长怎么计算呢?

周长计算公式是:周长=直径*圆周率

这里,车轮的直径是39,所以,周长我们可以通过“39*3.1415926535897932384626”计算出来。(有没有被我的数学天赋所折服?)

接下来,车轮转动的角度公式:移动距离/周长*360

所以,我们在进行角度设置时,让车轮【经过】的角度是:[[(Window.width-This.width)/(39*3.1415926535897932384626)*360]]。

既然角度会算了,接下来我们设置动作。

因为控制两个车轮的动作是一毛一样的,所以仅车轮“Wheel01”为例。

添加动作【旋转】车轮“Wheel01”,【经过】角度为“[[(Window.width-This.width)/(39*3.1415926535897932384626)*360]]”,然后,方向和锚点保持默认的【顺时针】和【中心】,动画也选择为【线性】,时间设置为“3000”毫秒。

通过以上步骤,我们就完成了这个案例的制作。

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

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址https://www.axure.com.cn/product/training/。

源文件下载:http://downloads.iaxure.com/run_car.rp


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

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

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


转载请注明:Axure原创教程网 » 快来!帅帅的小楼哥哥带你一起开车去!

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 厉害了,我的哥
    liangllk2017-12-08 14:14 回复
  2. 小楼老师,为啥要移动组合而不是动态面板,移动动态面板就出错了
    2017-12-12 14:50 回复
    • 我也想问。
      宝哥哥2017-12-20 09:41 回复
    • 当你移动动态面板的时候,汽车就会跑到右上角吧。这是因为动态面板的坐标是基于页面的。而组合在动态面板里,组合的坐标也就是基于面板内。也就是说“组合的坐标”和“面板的坐标”是完全不同个概念,不知道这样说能不能理解?
      派大星2017-12-26 17:30 回复
  3. 老师这里是不是错了?添加动作【旋转】车轮“Wheel01”,【经过】角度为“[[(Window.width-This.width)/(39*3.1415926535897932384626)*360]]”。这里的This指的是wheel01,而实际上应该是cargroup,因为要计算的是车身宽度而不是轮子宽度。
    派大星2017-12-29 10:32 回复
    • 小楼一夜听春语
      你要知道This是指添加交互的元件,也就是组合。
      小楼一夜听春语2017-12-29 11:25 回复
      • 这样,受教,我搞错了
        派大星2017-12-29 12:00 回复
  4. 这个轮子不用做的这么复杂,既然是效果,可以直接确定好这两个轮子转的时间是3000ms,然后设置为旋转2700度,以中心旋转也可以实现类似的效果。 😆 😆
    大蟒起霸2018-01-03 17:25 回复
    • 小楼一夜听春语
      你这样算角度不准确,另外教程本质是通过案例讲述一些系统变量的使用。
      小楼一夜听春语2018-01-04 09:53 回复
    • 2700度怎么的出来的,旋转有固定速度吗
      扶风2018-02-07 17:07 回复
  5. 请问我想从网页的右侧走到左侧,为什么移动到(0,0),小车不动?
    MZ_Mcc2018-03-20 16:18 回复
  6. 我的车一开始调不到浏览器的最左边,到浏览器最右边的时候有半截超过了,请问小楼哥哥,这是怎么回事呀
    Rowling2018-04-25 16:36 回复