對(duì)一個(gè)合格產(chǎn)品經(jīng)理來(lái)說(shuō)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)來(lái)輔助驗(yàn)證旋轉(zhuǎn)的效果，在axure的index界面從axure自帶的default元件庫(kù)中拖入一個(gè)圓命名為圓形。

2.在axure的index界面從axure自帶的default元件庫(kù)中拖入一個(gè)圓命名為矩形，填充為紅色。

3.下一步就是矩形的旋轉(zhuǎn)動(dòng)作了，我們現(xiàn)在采用頁(yè)面載入時(shí)加入case，要按照我們的意愿進(jìn)行旋轉(zhuǎn)就是要確定我們想要的圓心了，通常我們會(huì)做以下幾個(gè)步驟：

頁(yè)面載入時(shí)case1：元件-旋轉(zhuǎn)-勾選矩形，設(shè)置角度、動(dòng)畫、時(shí)間，然后就會(huì)想到那個(gè)圓的圓心可能就是offset from anchor的x，y的坐標(biāo)，事實(shí)是不是如此呢，我們來(lái)看下實(shí)際效果？

（1）我們按以上條件設(shè)置好

（2）現(xiàn)在就是我們要找那個(gè)圓心的坐標(biāo)了，我們可能有的小伙伴會(huì)誤認(rèn)為axure中標(biāo)識(shí)的坐標(biāo)就是圓心的坐標(biāo)，因此會(huì)把圓心坐標(biāo)填入，我們來(lái)試試！

為了讓它轉(zhuǎn)慢點(diǎn)，我們把時(shí)間可以調(diào)整為60000毫秒

（3）我們來(lái)預(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)的中心。

我們來(lái)糾正第一個(gè)誤解：axure中的元件坐標(biāo)即如圖所示紅框部分表示的不是元件中心坐標(biāo)而是元件的右上角坐標(biāo)，即圖中原型元件左上角A點(diǎn)的坐標(biāo)。

我們來(lái)糾正第二個(gè)誤解：對(duì)axure中offset from anchor，offset：偏離，補(bǔ)償 ?anchor：錨，連起來(lái)offset from anchor就是偏離錨點(diǎn)，也叫它抵消錨，我們來(lái)理解一下，什么叫offset from anchor.

我們可見：前面我們定義錨點(diǎn)是中心，offset from anchor設(shè)置的是250,150，也就是說(shuō)偏離錨點(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)呢？

1. 我們要找到圓形元件圓點(diǎn)的坐標(biāo)；
2. 我們要找到矩形元件中心的坐標(biāo)，兩個(gè)x，y坐標(biāo)的差值就是我們的off from anchor中的x，y值

知道了我們要找的東西，那么還有一個(gè)問(wèn)題：怎么知道矩形元件和圓形元件的中心呢，因?yàn)閍xure似乎并沒有標(biāo)識(shí)每個(gè)點(diǎn)的坐標(biāo)。別急，關(guān)于這點(diǎn)，我找到一個(gè)巧辦法，辦法很簡(jiǎn)單：我們用一個(gè)一個(gè)default中元件庫(kù)中的水平線或者垂直線，即可。如何做，下面我來(lái)說(shuō)明一下：

（1）首先從axure的default元件庫(kù)中拖入一個(gè)垂直線：

（2）壓縮垂直線或者水平線至一個(gè)點(diǎn)，作為一個(gè)標(biāo)準(zhǔn)點(diǎn)，因?yàn)閍xure中只有元件才能顯示其坐標(biāo)，如下圖：

（3）那么我們就可以利用這個(gè)點(diǎn)來(lái)找圓心了，將這個(gè)點(diǎn)移動(dòng)到圓中間，就可以看到圓心標(biāo)識(shí)的坐標(biāo)335,235。

（4）同樣我們把我們做出來(lái)的點(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ì)說(shuō)axure不是標(biāo)識(shí)的都是右上角嗎？坐標(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)識(shí)坐標(biāo)處，可以看到坐標(biāo)是重合的，所以此點(diǎn)表示坐標(biāo)精確無(wú)誤。

獲得了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。

我們來(lái)看效果是不是跟之前不一樣：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)：

1. 元件坐標(biāo)標(biāo)示的元件左上角坐標(biāo)
2. offset from anchor指的是錨點(diǎn)到要定義的旋轉(zhuǎn)的中心的偏移

希望能給大家在做旋轉(zhuǎn)動(dòng)作過(guò)程中一點(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)載。

題圖來(lái)自 Pexels，基于 CC0 協(xié)議