Axure7.0教程(六)math函數(shù)的使用(1)動(dòng)態(tài)面板環(huán)狀移動(dòng)

7 評(píng)論 14042 瀏覽 50 收藏 5 分鐘

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

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

本章實(shí)現(xiàn)效果:點(diǎn)擊按鈕,讓一個(gè)動(dòng)態(tài)面板(以下簡(jiǎn)稱(chēng)“動(dòng)面”)圍繞中心點(diǎn)(坐標(biāo)300,300)按半徑100Px進(jìn)行環(huán)狀移動(dòng)(就是繞圈)。

實(shí)現(xiàn)思路:

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

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

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

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

大家看到了這兩個(gè)函數(shù)頭疼嗎?我也很頭疼,因?yàn)槲抑肋@兩個(gè)函數(shù)是什么正弦余弦,但你問(wèn)我哪個(gè)是正弦,sorry,樓老師自認(rèn)文盲!

不過(guò),樓老師知道怎么用。為什么?百度的!這下大家有信心完成這個(gè)案例了吧?

下面說(shuō)說(shuō)公式:

 

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

說(shuō)明:半徑角度自定義,本案例初始值0,每次移動(dòng)+10,圓周率=3.1415926535897932384626(樓老師20多年前背下來(lái)的)。

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

說(shuō)明:半徑長(zhǎng)度自定義,本案例設(shè)置為100,中心點(diǎn)X坐標(biāo)值自定義,本案例設(shè)置為300。

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

說(shuō)明:中心點(diǎn)Y坐標(biāo)值自定義,本案例設(shè)置為300。

這就是樓老師查到的公式,事實(shí)證明,這個(gè)公式能用!

 

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

1、? hudu:用來(lái)保存弧度的值;

2、? newx: 圓周X坐標(biāo)值,僅用來(lái)存儲(chǔ);

3、? newy:圓周Y坐標(biāo)值,僅用來(lái)存儲(chǔ);

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

以上準(zhǔn)備完畢后,開(kāi)始制作原型:

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

2、? 設(shè)置動(dòng)態(tài)面板隱藏時(shí)事件:

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

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

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

說(shuō)明:注意順序,蛋疼的或者大姨媽疼的,可以試試把C放在最上面。

3、? 設(shè)置動(dòng)態(tài)面板顯示時(shí)事件:

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

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

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

B設(shè)置:移動(dòng)面板到絕對(duì)位置X等于[[newx]],Y等于[[newy]];

6-1

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

好了,原型制作完成。

6-2

接下來(lái),就是見(jiàn)證奇跡的時(shí)刻!你做對(duì)了嗎?

作者:小樓一夜聽(tīng)春語(yǔ)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. rp不在了 求重新分享 看文字有點(diǎn)難懂,跪求?。?!

    來(lái)自江蘇 回復(fù)
  2. 這個(gè)好難,看看

    來(lái)自四川 回復(fù)
  3. 樓主,其實(shí)不用把弧度換成角度的,可以把hudu的初始值設(shè)為0,然后每次動(dòng)態(tài)面板隱藏時(shí)新的hudu=hudu+0.1。
    非常感謝樓主的教程?。。?/p>

    來(lái)自廣東 回復(fù)
    1. 大神,方便的話(huà),把你的rp發(fā)我看看唄

      來(lái)自江蘇 回復(fù)
  4. rp不在了 求重新分享 看文字有點(diǎn)難懂

    來(lái)自四川 回復(fù)
  5. 很有必要

    來(lái)自北京 回復(fù)
  6. rp不存在。。。光看文字不明白。。

    來(lái)自廣東 回復(fù)