如何優雅地做一個抽獎轉盤

之前出了一個帖子如何讓你的原型圖動起來，很多童鞋問我抽獎轉盤是怎麼做的？今天抽空跟大家聊聊。（視頻第22秒見效果）這個是用Axure7.0做的，稍後介紹一下使用Axure 8.0和Principle來做轉盤抽獎交互~(Principle交互效果)

本文目錄如下：

1. （Principle）使用交互軟體做抽獎

1.1 準備材料

1.2 設置點擊事件

1.3 設置補間動畫時間

2. （Axure 7.0）使用動態面板做轉盤抽獎效果

2.1 準備材料

2.1 設置動態面板

2.3 設置事件

3. （Axuer 8.0）使用自帶的旋轉功能做抽獎轉盤效果

3.1 準備材料

3.2 添加事件

1. (Principle)使用交互軟體做抽獎

 1.1 準備材料

對Principle不了解的童鞋可以在官網上了解一下，做互動設計個人比較推薦用這款(不過唯一不足的是，它只有Mac版本)  http://principleux.com/

準備材料(可以將Sketch上的文件直接複製到Principle中)簡單粗暴，以JO+管家App為例，如下圖

 1.2 設置點擊事件

點擊圖上的」閃電箭頭」選中Tap，拖拽至想跳轉的頁面（此處Tap為點擊事件）。

然後畫布上出現一個綠色的箭頭，如圖所示：

需求為點擊「抽獎」按鈕後，視圖將會不停的切換，所以需要在第二張視圖後設置一個事件「Auto」，點擊「Auto」拖拽至下一張視圖，這裡重複的工作較多，就只截一張圖了。

做完上述動作後，會發現點擊抽獎，視圖變化太快，交互不好，所以，下面需要設置補間動畫的時間。

 1.3 設置補間動畫時間

點擊「Animate」將下面的工作區顯示出來

然後

點擊箭頭，將這個時間用滑鼠拉長一點，設置為0.1秒的間隔即可，然後就可以預覽了Principle交互效果

2. （Axure 7.0）使用動態面板做轉盤抽獎效果

 2.1 準備材料

拉一個圓形，和一根直線，多複製幾根，調整元件的位置角度，搞定，如圖

 2.1 設置動態面板

接下來做一個指針，拉一個動態面板，在動態面板中，添加若干狀態，如圖：

在這裡選中其中一個狀態，在狀態頁面中移動指針位置，按照旋轉的方向，來9個，差不多了。

此處省略….

如上圖，每個角度變換一下即可

 2.3 設置事件

設置「抽獎」按鈕事件，如圖：

ok，已經搞定。

此方法我在Axure 7.0時用的，更新了Axure到8.0 後 更加方便。下面介紹一下8.0版本的玩法。

3. （Axuer 8.0）使用自帶的旋轉功能做抽獎轉盤效果

 3.1 準備材料

上述2個例子，一個是轉動卡片的效果，一個是轉動箭頭的效果，此處介紹哦一下轉動轉盤的效果，轉盤動箭頭不動，先準備一下材料。

指針固定不動即可，首先先將轉盤上的元素「組合」起來取個名稱「轉盤」。

然後在「點我」這個元件上添加事件。

 3.2 添加事件

設置旋轉，參數為：相對位置、角度為[[1000+Math.random()*360]]、方向為順時針、錨點為中心、動畫為線性、事件為1000毫秒。

搞定，預覽即可。

看到這裡Axure7.0基本上可以卸載了，趕緊升級吧~

若要做複雜一點的交互，推薦使用Principle，比AE入手快~又簡單~~加油

分享作品

 

作者：Bass

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

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}