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

本案例原型下載: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]];
C設(shè)置動(dòng)態(tài)面板顯示/隱藏為切換。
好了,原型制作完成。
接下來(lái),就是見(jiàn)證奇跡的時(shí)刻!你做對(duì)了嗎?
rp不在了 求重新分享 看文字有點(diǎn)難懂,跪求?。?!
這個(gè)好難,看看
樓主,其實(shí)不用把弧度換成角度的,可以把hudu的初始值設(shè)為0,然后每次動(dòng)態(tài)面板隱藏時(shí)新的hudu=hudu+0.1。
非常感謝樓主的教程?。。?/p>
大神,方便的話(huà),把你的rp發(fā)我看看唄
rp不在了 求重新分享 看文字有點(diǎn)難懂
很有必要
rp不存在。。。光看文字不明白。。