中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

早幾期文章，我說沒有我做不出的交互，于是有同學加我微信，說老師你能實現這個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協議