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

首先看看效果：

動效分析：

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

一、繪制

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

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

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

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

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

二、添加交互

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

2.1 添加第一個移動

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

2.2 添加第二次移動

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

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

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

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

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

大功告成！最終效果：

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

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

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

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

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部