axure可以做效果圖嗎（Axure教程如何製作3D動效）

2023-05-24 07:59:06

早幾期文章，我說沒有我做不出的交互，於是有同學加我微信，說老師你能實現這個3D效果嗎？我本來想懟她一頓，這是平面軟體，但是一氣之下我就把她說的3D效果做出來了。

首先看看效果：

動效分析：

咋一看效果挺炫，但其實實現很簡單，只是元件移動距離，和圖層關係的問題。主要是要畫出正斜視圖正方體，因為我是用Axure畫的，懶得定位，所以有點不正，但不要在意這些細節，重點講思路，這樣以後遇到一些想實現的動效，你也會開始這樣思考。

一、繪製

在畫布添加一個矩形，選中矩形，然後用滑鼠雙擊邊，就可以變形了。

至於怎麼才能畫得正，我也想知道- -幾何數學好的同學可以提供一下方法，反正我是靠手感。畫出三個四邊形拼起來就是正方體，然後複製頂面，作為陰影。

然後連續複製六個，大家可以看出參差不齊的樣子，這叫藝術效果。

有同學會問：老師，效果圖明明只有四個，為什麼要複製六個？

這個問題問得好，多複製對角的兩個主要是為了知道這兩個位置的坐標，所以我們這裡把它們隱藏，為以下元素命名如下所示：

二、添加交互

這裡我們不做動態面板循環動畫了，直接用一個按鈕點擊，添加一個按鈕，並為之添加效果。

2.1 添加第一個移動

把1移動到2，把2移動到隱藏5，把3移動到隱藏6，把4移動到3。底部陰影跟上面一樣，坐標大家點擊元件就能查看了，這裡移動線性1000ms。

2.2 添加第二次移動

對於空間想像能力不行的，可以參考第一個移動效果。

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

看看效果，我們發現有問題：

大家看了這個效果，可能會很困惑，不要被迷惑了，其實只是圖層問題，設置下就好了。

移動2到4位置的時候，2應該置底。移動3到1位置的時候，3應該置頂。

大功告成！最終效果：

最後去掉不需要的文字，看動圖就是無限循環的效果了。其實用Axure還可以實現其他3D效果，我還做了另一個，看起簡單，其實比這個教程要難點。

大家可以思考一下上面這個怎麼做！提示「變形」「位移」。

本期到此，喜歡的同學可以動動小手指點點讚！感謝觀看~

本文由 @索大佩羅娜 原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

,