對一個合格產(chǎn)品經(jīng)理來說Axure技能是必備的，本篇文章主要幫助解決那些苦苦尋找繞一個任意固定點旋轉(zhuǎn)axure教程的伙伴！

一、實現(xiàn)的預(yù)期效果

讓矩形元件圍繞著某一個點進(jìn)行旋轉(zhuǎn)。

二、Axure版本：8.0團(tuán)隊版

三、教程開始

1.首先我們新建一個RP文件，為驗證結(jié)果準(zhǔn)確，我們用一個圓作參考，繞其圓心旋轉(zhuǎn)來輔助驗證旋轉(zhuǎn)的效果，在axure的index界面從axure自帶的default元件庫中拖入一個圓命名為圓形。

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

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

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

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

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

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

（3）我們來預(yù)覽一下效果：https://h0xjqu.axshare.com

4.為什么會這樣？矩形為什么不會按我們想要的圓心的進(jìn)行旋轉(zhuǎn)，而是以右下角某個點為圓心進(jìn)行旋轉(zhuǎn)？其實，產(chǎn)生這種現(xiàn)象的原因有兩個：

• 第一個：誤解axure元件中坐標(biāo)為其中心坐標(biāo)。
• 第二個：誤解axure中offset from anchor真正的含義，認(rèn)為x，y就是旋轉(zhuǎn)的中心。

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

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

我們可見：前面我們定義錨點是中心，offset from anchor設(shè)置的是250,150，也就是說偏離錨點x軸250單位，Y軸150單位，補(bǔ)充一點，x軸往右坐標(biāo)為正，Y軸往下坐標(biāo)為正，反之為負(fù)數(shù)，可能有的小伙伴已經(jīng)似乎明白了什么。

很抱歉的告訴你，你的第六感很準(zhǔn)確，我們前面做的旋轉(zhuǎn)的中心在矩形中心偏右250單位，偏下150單位，所以才會造成如此大的誤差。我們可以再看一遍：https://h0xjqu.axshare.com

5.那么我們?nèi)绾尾拍茏尵匦我晕覀兿胍膱A心為準(zhǔn)做旋轉(zhuǎn)運(yùn)動呢？

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

知道了我們要找的東西，那么還有一個問題：怎么知道矩形元件和圓形元件的中心呢，因為axure似乎并沒有標(biāo)識每個點的坐標(biāo)。別急，關(guān)于這點，我找到一個巧辦法，辦法很簡單：我們用一個一個default中元件庫中的水平線或者垂直線，即可。如何做，下面我來說明一下：

（1）首先從axure的default元件庫中拖入一個垂直線：

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

（3）那么我們就可以利用這個點來找圓心了，將這個點移動到圓中間，就可以看到圓心標(biāo)識的坐標(biāo)335,235。

（4）同樣我們把我們做出來的點復(fù)制并移動到矩形的中心，也就是我們的錨點定義的地方，并確定其坐標(biāo)。為方便查看，我們把矩形中心點定義C點，圓形圓心定義為D點，如圖，C點坐標(biāo)為180,235。

（5）以上我們就獲得了C點、D點，即錨點和我們要繞著旋轉(zhuǎn)中心的坐標(biāo)。

有人這時候會說axure不是標(biāo)識的都是右上角嗎？坐標(biāo)準(zhǔn)確嗎？這點不用擔(dān)心，因為我們壓縮的點已經(jīng)是一個點，不信的話，你們可以把這個點拖動到圓形元件左上角標(biāo)識坐標(biāo)處，可以看到坐標(biāo)是重合的，所以此點表示坐標(biāo)精確無誤。

獲得了C點、D點坐標(biāo)，我們回到之前發(fā)生錯誤設(shè)置的offset from anchor 設(shè)置x、y的值，我們將圓心的坐標(biāo)減去矩形錨點（中心）的坐標(biāo)得到D點X軸偏離錨點(C點）155單位，D點Y軸偏離錨點（D點）0單位。此時我們將155,0填入offset from anchor。

我們來看效果是不是跟之前不一樣：https://wwnfwq.axshare.com

當(dāng)然了，要是以上錨點定義要是定義為左上角，和其他位置，會產(chǎn)生不一樣的效果因為你定義的錨點位置變化了這點要注意。一般我們都采用中心就好了，要是直接一個元件原地旋轉(zhuǎn)，那么我們錨點定義為中心，offset from anchor中的X，Y值就是0,0了，也是我們常用的。

最后我們回顧一下以上的關(guān)鍵點：

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

希望能給大家在做旋轉(zhuǎn)動作過程中一點幫助，謝謝！

作者：止，產(chǎn)品經(jīng)理，2年移動互聯(lián)網(wǎng)工業(yè)app和web端系統(tǒng)建設(shè)產(chǎn)品經(jīng)驗，歡迎交流。

本文由 @止 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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