早幾期文章，我說(shuō)沒有我做不出的交互，于是有同學(xué)加我微信，說(shuō)老師你能實(shí)現(xiàn)這個(gè)3D效果嗎？我本來(lái)想懟她一頓，這是平面軟件，但是一氣之下我就把她說(shuō)的3D效果做出來(lái)了。

首先看看效果：

動(dòng)效分析：

咋一看效果挺炫，但其實(shí)實(shí)現(xiàn)很簡(jiǎn)單，只是元件移動(dòng)距離，和圖層關(guān)系的問(wèn)題。主要是要畫出正斜視圖正方體，因?yàn)槲沂怯肁xure畫的，懶得定位，所以有點(diǎn)不正，但不要在意這些細(xì)節(jié)，重點(diǎn)講思路，這樣以后遇到一些想實(shí)現(xiàn)的動(dòng)效，你也會(huì)開始這樣思考。

一、繪制

在畫布添加一個(gè)矩形，選中矩形，然后用鼠標(biāo)雙擊邊，就可以變形了。

至于怎么才能畫得正，我也想知道- -幾何數(shù)學(xué)好的同學(xué)可以提供一下方法，反正我是靠手感。畫出三個(gè)四邊形拼起來(lái)就是正方體，然后復(fù)制頂面，作為陰影。

然后連續(xù)復(fù)制六個(gè)，大家可以看出參差不齊的樣子，這叫藝術(shù)效果。

有同學(xué)會(huì)問(wèn)：老師，效果圖明明只有四個(gè)，為什么要復(fù)制六個(gè)？

這個(gè)問(wèn)題問(wèn)得好，多復(fù)制對(duì)角的兩個(gè)主要是為了知道這兩個(gè)位置的坐標(biāo)，所以我們這里把它們隱藏，為以下元素命名如下所示：

二、添加交互

這里我們不做動(dòng)態(tài)面板循環(huán)動(dòng)畫了，直接用一個(gè)按鈕點(diǎn)擊，添加一個(gè)按鈕，并為之添加效果。

2.1 添加第一個(gè)移動(dòng)

把1移動(dòng)到2，把2移動(dòng)到隱藏5，把3移動(dòng)到隱藏6，把4移動(dòng)到3。底部陰影跟上面一樣，坐標(biāo)大家點(diǎn)擊元件就能查看了，這里移動(dòng)線性1000ms。

2.2 添加第二次移動(dòng)

對(duì)于空間想象能力不行的，可以參考第一個(gè)移動(dòng)效果。

通過(guò)觀察，第二次移動(dòng)是：移動(dòng)2到4，移動(dòng)3到1（陰影同）。所以設(shè)置交互，等待1000ms，設(shè)置如下：

看看效果，我們發(fā)現(xiàn)有問(wèn)題：

大家看了這個(gè)效果，可能會(huì)很困惑，不要被迷惑了，其實(shí)只是圖層問(wèn)題，設(shè)置下就好了。

1. 移動(dòng)2到4位置的時(shí)候，2應(yīng)該置底。
2. 移動(dòng)3到1位置的時(shí)候，3應(yīng)該置頂。

大功告成！最終效果：

最后去掉不需要的文字，看動(dòng)圖就是無(wú)限循環(huán)的效果了。其實(shí)用Axure還可以實(shí)現(xiàn)其他3D效果，我還做了另一個(gè)，看起簡(jiǎn)單，其實(shí)比這個(gè)教程要難點(diǎn)。

大家可以思考一下上面這個(gè)怎么做！提示“變形”“位移”。

本期到此，喜歡的同學(xué)可以動(dòng)動(dòng)小手指點(diǎn)點(diǎn)贊！感謝觀看~

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

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