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

編輯導(dǎo)語(yǔ)：很多時(shí)候我們會(huì)用到3D的效果，今天筆者教大家用axure做一個(gè)3D的效果，本文以三維世界地圖為案例，簡(jiǎn)單的闡述axure制作3D原型的技巧，我們一起來(lái)看一下。

一、Axure制作出來(lái)的3D效果

原型預(yù)覽地址：https://7w42g3.axshare.com/#g=1

上圖就是axure制作出來(lái)的3D地圖的效果，大家可以體驗(yàn)一下，主要是用圖片+動(dòng)態(tài)面板的效果來(lái)實(shí)現(xiàn)的，下面開(kāi)始教學(xué)。

二、準(zhǔn)備材料

素材：地球各個(gè)角度的圖片，圖片越多，實(shí)現(xiàn)的效果越好，作者是大概以3度一張圖片；如果你們有專(zhuān)業(yè)的設(shè)備可以自行拍攝，如果沒(méi)有的話(huà)也可以在網(wǎng)上下載。

1. axure內(nèi)材料

材料1：按鈕：左右按鈕各一個(gè)。

材料2：圖片元件:1個(gè)將圖片轉(zhuǎn)為動(dòng)態(tài)面板（命名為內(nèi)面板），然后倒入第一張圖片。

將按鈕放在對(duì)應(yīng)位置，完成后下圖所示：

然后復(fù)制內(nèi)面板的面板狀態(tài)，有多少?gòu)垐D片就復(fù)制多少個(gè)狀態(tài)，如下圖所示。

完成后一次將圖片素材按順序倒入對(duì)應(yīng)的動(dòng)態(tài)面板。

材料3：動(dòng)態(tài)面板（命名為循環(huán)面板），用于實(shí)現(xiàn)地圖自傳的效果，后面在交互中會(huì)詳細(xì)介紹，這里在面板里有兩個(gè)狀態(tài)即可。

三、交互設(shè)置

1. 左右按鈕交互設(shè)置

鼠標(biāo)單擊右按鈕時(shí)，設(shè)置內(nèi)面板狀態(tài)為next，向后循環(huán)。

鼠標(biāo)單擊左按鈕時(shí)，設(shè)置內(nèi)面板狀態(tài)為previous，向前循環(huán)。

2. 鼠標(biāo)左右拖動(dòng)交互設(shè)置

在內(nèi)面板鼠標(biāo)拖動(dòng)時(shí)，這里需要做一個(gè)判斷鼠標(biāo)是左滑動(dòng)還是右滑動(dòng)，用[[DragX]]來(lái)判斷。

• 如果[[DragX]]>0，即右滑動(dòng)，這時(shí)觸發(fā)右按鈕鼠標(biāo)單擊時(shí)即可；
• 如果[[DragX]]<0，即左滑動(dòng)，這時(shí)觸發(fā)左按鈕鼠標(biāo)單擊時(shí)即可。

3. 鍵盤(pán)左右方向鍵按下時(shí)交互設(shè)置

頁(yè)面按鍵按下時(shí)，如果按下的是←（左方向鍵），這時(shí)觸發(fā)左按鈕鼠標(biāo)單擊時(shí)即可；如果按下的是→（右方向鍵），這時(shí)觸發(fā)右按鈕鼠標(biāo)單擊時(shí)即可。

4. 循環(huán)面板交互設(shè)置

首先要確保循環(huán)面板有兩個(gè)狀態(tài)或以上，面板內(nèi)不需要放任何元件。

循環(huán)面板載入時(shí)，我們?cè)O(shè)置該面板狀態(tài)為next，向后循環(huán)循環(huán)間隔30ms，這里的時(shí)間是轉(zhuǎn)動(dòng)快慢時(shí)間，可以根據(jù)實(shí)際情況自己設(shè)置。

循環(huán)面板狀態(tài)改變時(shí)，觸發(fā)右按鈕鼠標(biāo)單擊時(shí)即可。

5. 停止自動(dòng)循環(huán)交互設(shè)置

我們接下來(lái)要實(shí)現(xiàn)鼠標(biāo)移入時(shí)停止自轉(zhuǎn)，移出時(shí)開(kāi)始自轉(zhuǎn)的效果。

首先把頁(yè)面內(nèi)所有原型組合起來(lái)轉(zhuǎn)為動(dòng)態(tài)面板（命名為外面板），鼠標(biāo)移入時(shí)，設(shè)置循環(huán)面板的狀態(tài)為停止循環(huán)；鼠標(biāo)移出時(shí)，觸發(fā)循環(huán)面板載入時(shí)事件（觸發(fā)循環(huán)開(kāi)始）。

以上就是本期分享的全部?jī)?nèi)容，謝謝閱讀。

下期文章，作者會(huì)展開(kāi)介紹3D技術(shù)的應(yīng)用場(chǎng)景——VR看車(chē)的教程，請(qǐng)期待。

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

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