本案例原型下載：axure7.0教程（六）動態(tài)面板環(huán)狀移動.rp

Axure rp7.0增加了一些新的函數(shù)，這些改變可能會讓axure原型的高保真與低保真之爭更加激烈。因為這些函數(shù)已經(jīng)更接近編程。其實只要我們知道了使用方法，也許并不困難。從本教程開始，我們對Math函數(shù)進(jìn)行一些應(yīng)用上的嘗試。

本章實現(xiàn)效果：點擊按鈕，讓一個動態(tài)面板（以下簡稱“動面”）圍繞中心點（坐標(biāo)300,300）按半徑100Px進(jìn)行環(huán)狀移動（就是繞圈）。

實現(xiàn)思路：

1、? 既然是讓動面不停的繞圈，那么結(jié)合axure rp6.5教程中的一些經(jīng)驗，這應(yīng)該要通過死循環(huán)（動態(tài)面板不停隱藏、顯示）來實現(xiàn)，所以需要一個用來繞圈的動面，和一個用來實現(xiàn)循環(huán)的動面。

2、? 當(dāng)然，我們還需要一個觸發(fā)循環(huán)的按鈕，再放入一個矩形改成200*200的圓形拖到中心點的位置，讓效果更加明顯。

3、? 如果要讓動面繞圈，那么我們就需要知道每到一個角度（一共360度，大家都懂的）時候，繞圈這個動面的坐標(biāo)值，知道了整個一圈的坐標(biāo)值，我們就能通過移動動面的事件，讓繞圈的動面，沿著這些坐標(biāo)值移動了。那么坐標(biāo)值怎么能獲取呢？就要Math函數(shù)出馬了。

本章函數(shù)：Math.Cos(),Math.Sin()

大家看到了這兩個函數(shù)頭疼嗎？我也很頭疼，因為我知道這兩個函數(shù)是什么正弦余弦，但你問我哪個是正弦，sorry，樓老師自認(rèn)文盲！

不過，樓老師知道怎么用。為什么？百度的！這下大家有信心完成這個案例了吧？

下面說說公式：

公式1：弧度=半徑角度*圓周率/180

說明：半徑角度自定義，本案例初始值0，每次移動+10，圓周率=3.1415926535897932384626（樓老師20多年前背下來的）。

公式2：圓周X坐標(biāo)值=半徑長度* Math.Cos(弧度)+中心點X坐標(biāo)值

說明：半徑長度自定義，本案例設(shè)置為100，中心點X坐標(biāo)值自定義，本案例設(shè)置為300。

公式2：圓周Y坐標(biāo)值=半徑長度* Math.Sin(弧度)+中心點Y坐標(biāo)值

說明：中心點Y坐標(biāo)值自定義，本案例設(shè)置為300。

這就是樓老師查到的公式，事實證明，這個公式能用！

下面就是定義變量了，我們都需要什么變量呢？

1、? hudu：用來保存弧度的值；

2、? newx: 圓周X坐標(biāo)值，僅用來存儲；

3、? newy：圓周Y坐標(biāo)值，僅用來存儲；

4、jiaodu：用來保存角度值和遞增后的角度值，可以設(shè)置默認(rèn)值0，每次循環(huán)+10度；即jiaodu=jiaodu+10；。

以上準(zhǔn)備完畢后，開始制作原型：

1、? 設(shè)置按鈕onclick事件：設(shè)置動態(tài)面板顯示/隱藏為切換；

2、? 設(shè)置動態(tài)面板隱藏時事件：

A設(shè)置變量值jiaodu等于[[hudu+10]]（旋轉(zhuǎn)10度）

B設(shè)置等待50毫秒；

C設(shè)置動態(tài)面板顯示/隱藏為切換；

說明：注意順序，蛋疼的或者大姨媽疼的，可以試試把C放在最上面。

3、? 設(shè)置動態(tài)面板顯示時事件：

A設(shè)置：變量值hudu等于[[jiaodu*3.14159265/180]]；

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

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

B設(shè)置：移動面板到絕對位置X等于[[newx]]，Y等于[[newy]]；

C設(shè)置動態(tài)面板顯示/隱藏為切換。

好了，原型制作完成。

接下來，就是見證奇跡的時刻！你做對了嗎？

作者：小樓一夜聽春語