Axure教程:如何讓元件繞著某一個(gè)點(diǎn)進(jìn)行旋轉(zhuǎn)!
對一個(gè)合格產(chǎn)品經(jīng)理來說Axure技能是必備的,本篇文章主要幫助解決那些苦苦尋找繞一個(gè)任意固定點(diǎn)旋轉(zhuǎn)axure教程的伙伴!
一、實(shí)現(xiàn)的預(yù)期效果
讓矩形元件圍繞著某一個(gè)點(diǎn)進(jìn)行旋轉(zhuǎn)。
二、Axure版本:8.0團(tuán)隊(duì)版
三、教程開始
1.首先我們新建一個(gè)RP文件,為驗(yàn)證結(jié)果準(zhǔn)確,我們用一個(gè)圓作參考,繞其圓心旋轉(zhuǎn)來輔助驗(yàn)證旋轉(zhuǎn)的效果,在axure的index界面從axure自帶的default元件庫中拖入一個(gè)圓命名為圓形。
2.在axure的index界面從axure自帶的default元件庫中拖入一個(gè)圓命名為矩形,填充為紅色。
3.下一步就是矩形的旋轉(zhuǎn)動(dòng)作了,我們現(xiàn)在采用頁面載入時(shí)加入case,要按照我們的意愿進(jìn)行旋轉(zhuǎn)就是要確定我們想要的圓心了,通常我們會(huì)做以下幾個(gè)步驟:
頁面載入時(shí)case1:元件-旋轉(zhuǎn)-勾選矩形,設(shè)置角度、動(dòng)畫、時(shí)間,然后就會(huì)想到那個(gè)圓的圓心可能就是offset from anchor的x,y的坐標(biāo),事實(shí)是不是如此呢,我們來看下實(shí)際效果?
(1)我們按以上條件設(shè)置好
(2)現(xiàn)在就是我們要找那個(gè)圓心的坐標(biāo)了,我們可能有的小伙伴會(huì)誤認(rèn)為axure中標(biāo)識的坐標(biāo)就是圓心的坐標(biāo),因此會(huì)把圓心坐標(biāo)填入,我們來試試!
為了讓它轉(zhuǎn)慢點(diǎn),我們把時(shí)間可以調(diào)整為60000毫秒
(3)我們來預(yù)覽一下效果:https://h0xjqu.axshare.com
4.為什么會(huì)這樣?矩形為什么不會(huì)按我們想要的圓心的進(jìn)行旋轉(zhuǎn),而是以右下角某個(gè)點(diǎn)為圓心進(jìn)行旋轉(zhuǎn)?其實(shí),產(chǎn)生這種現(xiàn)象的原因有兩個(gè):
- 第一個(gè):誤解axure元件中坐標(biāo)為其中心坐標(biāo)。
- 第二個(gè):誤解axure中offset from anchor真正的含義,認(rèn)為x,y就是旋轉(zhuǎn)的中心。
我們來糾正第一個(gè)誤解:axure中的元件坐標(biāo)即如圖所示紅框部分表示的不是元件中心坐標(biāo)而是元件的右上角坐標(biāo),即圖中原型元件左上角A點(diǎn)的坐標(biāo)。
我們來糾正第二個(gè)誤解:對axure中offset from anchor,offset:偏離,補(bǔ)償 ?anchor:錨,連起來offset from anchor就是偏離錨點(diǎn),也叫它抵消錨,我們來理解一下,什么叫offset from anchor.
我們可見:前面我們定義錨點(diǎn)是中心,offset from anchor設(shè)置的是250,150,也就是說偏離錨點(diǎn)x軸250單位,Y軸150單位,補(bǔ)充一點(diǎn),x軸往右坐標(biāo)為正,Y軸往下坐標(biāo)為正,反之為負(fù)數(shù),可能有的小伙伴已經(jīng)似乎明白了什么。
很抱歉的告訴你,你的第六感很準(zhǔn)確,我們前面做的旋轉(zhuǎn)的中心在矩形中心偏右250單位,偏下150單位,所以才會(huì)造成如此大的誤差。我們可以再看一遍:https://h0xjqu.axshare.com
5.那么我們?nèi)绾尾拍茏尵匦我晕覀兿胍膱A心為準(zhǔn)做旋轉(zhuǎn)運(yùn)動(dòng)呢?
- 我們要找到圓形元件圓點(diǎn)的坐標(biāo);
- 我們要找到矩形元件中心的坐標(biāo),兩個(gè)x,y坐標(biāo)的差值就是我們的off from anchor中的x,y值
知道了我們要找的東西,那么還有一個(gè)問題:怎么知道矩形元件和圓形元件的中心呢,因?yàn)閍xure似乎并沒有標(biāo)識每個(gè)點(diǎn)的坐標(biāo)。別急,關(guān)于這點(diǎn),我找到一個(gè)巧辦法,辦法很簡單:我們用一個(gè)一個(gè)default中元件庫中的水平線或者垂直線,即可。如何做,下面我來說明一下:
(1)首先從axure的default元件庫中拖入一個(gè)垂直線:
(2)壓縮垂直線或者水平線至一個(gè)點(diǎn),作為一個(gè)標(biāo)準(zhǔn)點(diǎn),因?yàn)閍xure中只有元件才能顯示其坐標(biāo),如下圖:
(3)那么我們就可以利用這個(gè)點(diǎn)來找圓心了,將這個(gè)點(diǎn)移動(dòng)到圓中間,就可以看到圓心標(biāo)識的坐標(biāo)335,235。
(4)同樣我們把我們做出來的點(diǎn)復(fù)制并移動(dòng)到矩形的中心,也就是我們的錨點(diǎn)定義的地方,并確定其坐標(biāo)。為方便查看,我們把矩形中心點(diǎn)定義C點(diǎn),圓形圓心定義為D點(diǎn),如圖,C點(diǎn)坐標(biāo)為180,235。
(5)以上我們就獲得了C點(diǎn)、D點(diǎn),即錨點(diǎn)和我們要繞著旋轉(zhuǎn)中心的坐標(biāo)。
有人這時(shí)候會(huì)說axure不是標(biāo)識的都是右上角嗎?坐標(biāo)準(zhǔn)確嗎?這點(diǎn)不用擔(dān)心,因?yàn)槲覀儔嚎s的點(diǎn)已經(jīng)是一個(gè)點(diǎn),不信的話,你們可以把這個(gè)點(diǎn)拖動(dòng)到圓形元件左上角標(biāo)識坐標(biāo)處,可以看到坐標(biāo)是重合的,所以此點(diǎn)表示坐標(biāo)精確無誤。
獲得了C點(diǎn)、D點(diǎn)坐標(biāo),我們回到之前發(fā)生錯(cuò)誤設(shè)置的offset from anchor 設(shè)置x、y的值,我們將圓心的坐標(biāo)減去矩形錨點(diǎn)(中心)的坐標(biāo)得到D點(diǎn)X軸偏離錨點(diǎn)(C點(diǎn))155單位,D點(diǎn)Y軸偏離錨點(diǎn)(D點(diǎn))0單位。此時(shí)我們將155,0填入offset from anchor。
我們來看效果是不是跟之前不一樣:https://wwnfwq.axshare.com
當(dāng)然了,要是以上錨點(diǎn)定義要是定義為左上角,和其他位置,會(huì)產(chǎn)生不一樣的效果因?yàn)槟愣x的錨點(diǎn)位置變化了這點(diǎn)要注意。一般我們都采用中心就好了,要是直接一個(gè)元件原地旋轉(zhuǎn),那么我們錨點(diǎn)定義為中心,offset from anchor中的X,Y值就是0,0了,也是我們常用的。
最后我們回顧一下以上的關(guān)鍵點(diǎn):
- 元件坐標(biāo)標(biāo)示的元件左上角坐標(biāo)
- offset from anchor指的是錨點(diǎn)到要定義的旋轉(zhuǎn)的中心的偏移
希望能給大家在做旋轉(zhuǎn)動(dòng)作過程中一點(diǎn)幫助,謝謝!
作者:止,產(chǎn)品經(jīng)理,2年移動(dòng)互聯(lián)網(wǎng)工業(yè)app和web端系統(tǒng)建設(shè)產(chǎn)品經(jīng)驗(yàn),歡迎交流。
本文由 @止 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自 Pexels,基于 CC0 協(xié)議
大佬,這個(gè)簡單,有沒有橢圓形軌跡旋轉(zhuǎn)的步驟呀,百度有一個(gè)看不懂,希望能出一個(gè)
不好意思哈,措辭,我是說這個(gè)Xy坐標(biāo)相減,就能得出軌跡,橢圓形的那個(gè)旋轉(zhuǎn)感覺好復(fù)雜,能有網(wǎng)址直接用就更好啦
axure9的好像不太一樣,我按照你的那種修改,還是不能旋轉(zhuǎn)
怎樣能夠一直旋轉(zhuǎn)不讓他停下來呢
最笨的方法把旋轉(zhuǎn)360° ,改成更大的數(shù)目3600就是10圈,以此類推
怎么才能只旋轉(zhuǎn)一次就停止呢?
旋轉(zhuǎn)里面有角度設(shè)置啊
計(jì)算圓心和矩形中心點(diǎn)的坐標(biāo)值就是很簡單,不需要這么復(fù)雜的擺放調(diào)整元件。
圓x坐標(biāo)=圓的x坐標(biāo)+圓的半徑(圓的寬度/2),圓y坐標(biāo)=圓的y坐標(biāo)+圓的半徑(圓的高度/2);矩形的中心點(diǎn)坐標(biāo)計(jì)算方式與圓是一樣的方法。因此偏離的x軸與y軸距離就很容易計(jì)算了。
?? 老鐵,本篇是解決偏離錨的概念,那個(gè)圓不是重點(diǎn),只是拿來參考最后的旋轉(zhuǎn)結(jié)果準(zhǔn)確,不是單純的計(jì)算坐標(biāo)問題哦
沒有重點(diǎn)講解圓以及矩形的坐標(biāo),那是中間過程,其最終結(jié)果就是為了計(jì)算偏離的值,然后填到配置動(dòng)作里。兄弟我也沒別的意思啊,不要誤會(huì)啥。
?? 其實(shí)只要懂得什么叫偏離錨就行了,計(jì)算坐標(biāo)只是方法了,沒事,多多交流,多多學(xué)習(xí)哈!重點(diǎn)是方法和概念去幫助那些不懂的新人,增強(qiáng)他們工作中的能力和類似的思考方法,其實(shí)這才是我們這些人去寫文章的目的哈,為寫而寫沒有任何價(jià)值,為幫助他人而寫,才是一篇文章最大化價(jià)值的體現(xiàn)
而且能讓很多人,怎么通過壓縮一個(gè)元件找精確的坐標(biāo),而不是元件的左上角坐標(biāo) ??
兄弟,只能打賞了。
干嘛這么委屈哈
建議作者用gif替換鏈接,便利移動(dòng)端讀者。
謝謝兄弟提的意見,我也同感,也希望文章對你有幫助
感覺用的場景不多啊
當(dāng)你想要一個(gè)東西繞著旋轉(zhuǎn),你就可以用到了,或者簡單的刷新動(dòng)效,不是有轉(zhuǎn)圈的標(biāo)志,你就可以自己制作元件了,是不是有啟發(fā)了?
我想請教一下,鏈接怎么生成的?
首先你要有Axure.share賬號,然后平時(shí)做axure就可以點(diǎn)擊發(fā)布選擇發(fā)布到axure.share
導(dǎo)出html文件
很好啊 非常好
收藏收藏
這個(gè)確定是這個(gè)效果???
你點(diǎn)擊鏈接地址可以看,還不懂的話,可以交流
嗯,剛才搞錯(cuò)了,謝謝
沒事啊,希望這篇文章對你有幫助,以后會(huì)出其他的,
好的
我是小哥哥