axure7.0教程_小楼作品(六)math函数的使用(1)动态面板环状移动

AxureRP7.0教程 小楼一夜听春语 15104℃ 0评论

本案例原型下载:axure7.0教程_小楼作品(六)动态面板环状移动.rp

Axure rp7.0增加了一些新的函数,这些改变可能会让axure原型的高保真与低保真之争更加激烈。因为这些函数已经更接近编程。其实只要我们知道了使用方法,也许并不困难。从本教程开始,我们对Math函数进行一些应用上的尝试。

本章实现效果:点击按钮,让一个动态面板(以下简称“动面”)围绕中心点(坐标300,300)按半径100Px进行环状移动(就是绕圈)。

gaollg1

实现思路:

1、  既然是让动面不停的绕圈,那么结合axure rp6.5教程中的一些经验,这应该要通过死循环(动态面板不停隐藏、显示)来实现,所以需要一个用来绕圈的动面,和一个用来实现循环的动面。

2、  当然,我们还需要一个触发循环的按钮,再放入一个矩形改成200*200的圆形拖到中心点的位置,让效果更加明显。

3、  如果要让动面绕圈,那么我们就需要知道每到一个角度(一共360度,大家都懂的)时候,绕圈这个动面的坐标值,知道了整个一圈的坐标值,我们就能通过移动动面的事件,让绕圈的动面,沿着这些坐标值移动了。那么坐标值怎么能获取呢?就要Math函数出马了。

本章函数:Math.Cos(),Math.Sin()

大家看到了这两个函数头疼吗?我也很头疼,因为我知道这两个函数是什么正弦余弦,但你问我哪个是正弦,sorry,楼老师自认文盲!

不过,楼老师知道怎么用。为什么?百度的!这下大家有信心完成这个案例了吧?

下面说说公式:

 

公式1:弧度=半径角度*圆周率/180 

说明:半径角度自定义,本案例初始值0,每次移动+10,圆周率=3.1415926535897932384626(楼老师20多年前背下来的)。

公式2:圆周X坐标值=半径长度* Math.Cos(弧度)+中心点X坐标值

说明:半径长度自定义,本案例设置为100,中心点X坐标值自定义,本案例设置为300。

公式2:圆周Y坐标值=半径长度* Math.Sin(弧度)+中心点Y坐标值

说明:中心点Y坐标值自定义,本案例设置为300。

这就是楼老师查到的公式,事实证明,这个公式能用!

 

下面就是定义变量了,我们都需要什么变量呢?

1、  hudu:用来保存弧度的值;

2、  newx: 圆周X坐标值,仅用来存储;

3、  newy:圆周Y坐标值,仅用来存储;

4、jiaodu:用来保存角度值和递增后的角度值,可以设置默认值0,每次循环+10度;即jiaodu=jiaodu+10;。

以上准备完毕后,开始制作原型:

1、  设置按钮onclick事件:设置动态面板显示/隐藏为切换;

2、  设置动态面板隐藏时事件:

A设置变量值jiaodu等于[[hudu+10]](旋转10度)

B设置等待50毫秒;

C设置动态面板显示/隐藏为切换;

说明:注意顺序,蛋疼的或者大姨妈疼的,可以试试把C放在最上面。

3、  设置动态面板显示时事件:

A设置:变量值hudu等于[[jiaodu*3.14159265/180]];

变量值newx等于[[100* Math.Cos(hudu)+300]];

变量值newy等于[[100* Math.Sin(hudu)+300]];

B设置:移动面板到绝对位置X等于[[newx]],Y等于[[newy]];

6-1

C设置动态面板显示/隐藏为切换。

好了,原型制作完成。

6-2

接下来,就是见证奇迹的时刻!你做对了吗?


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

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

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


转载请注明:Axure原创教程网 » axure7.0教程_小楼作品(六)math函数的使用(1)动态面板环状移动

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 你和我以前背的圆周率位数一样哦,不会是那个“山巅一寺一壶酒……”
    一个,你懂的2013-11-21 16:19 回复
  2. 补充一句吧,由于axure第一象限与平时的坐标系是镜像的,故y的坐标应该是:-半径长度* Math.Sin(弧度)+中心点Y坐标值。改一下就知道了,会变逆时针转,这才是jiaodu变大的真正效果
    一个,你懂的2013-11-21 16:54 回复
    • 小楼一夜听春语
      数学学得不错
      小楼一夜听春语2013-11-21 17:38 回复
  3. 再补充一个,坐标值应该各减去圆点的半径,否则不会顺着大圆的轨迹移动,有偏差
    一个,你懂的2013-11-21 17:57 回复
    • 小楼一夜听春语
      补充的很不错,数学高手啊
      小楼一夜听春语2013-12-07 21:27 回复
  4. rp下载不了。。光看文字不清楚啊。。求教
    haixian2014-06-09 16:41 回复
    • 小楼一夜听春语
      已修复下载
      小楼一夜听春语2014-06-10 11:07 回复
  5. 公式看不懂,sin的值是不是有正有负的?什么情况是正,什么情况是负?怎么才能实现2个y相加就是坐标,。。??
    pak2015-10-27 15:56 回复
    • 请问怎样设置一个自变量的变化范围终止运动呢
      者也鱼2018-03-22 15:28 回复
  6. 擦 好崩溃 数学渣渣
    huhu2016-05-31 16:30 回复