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

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》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

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


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

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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 厉害了,我的哥
    liangllk2017-12-08 14:14 (5天前)回复
  2. 小楼老师,为啥要移动组合而不是动态面板,移动动态面板就出错了
    2017-12-12 14:50 (1天前)回复