起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：如何制作有趣的小紅書促銷小游戲？
如何利用Axure來制作有趣的小紅書促銷小游戲？一起來文中看看~
溫馨提示注：本教程適合有Axure基礎的人觀看
首先我們先看看制作的效果：
操作說明：長按圓臉，臉會隨著鼠標按的時間壓縮，壓縮越久，松開鼠標時彈得越遠，同時能把箱子頂得越遠。箱子跟頂部虛線框重合度越高，獲得分數越高。
當在小紅書看到這個游戲時，我覺得可以用Axure實現，所以就花了時間把它做下來了。
話不多說，教學開始~
一、圓臉
步驟1：畫臉
動效分析：當長按時
- 臉會被壓縮
- 眼睛變樣
- 臉越來越紅
根據這三個特性，我們把圓臉分成三部分畫出來。
元素說明：
- 臉直接畫一體的，方便一起變形，命名：臉背景
- 腮紅是用photoshop畫筆點了一下，白色為透明的，命名：臉紅
- 眼睛用動態面板，分別創建兩個狀態，命名：眼睛
步驟2：做動效
（1）首先把三個元素組合到一起，命名：臉，因為要控制三個元素一起變形。
（2）選中臉組合，創建動態面板，命名：角色。繪制背景375*667，填充粉紅色。添加一文本，輸入0，命名：長按時間（這個數據很有用）。
（3）利用動態面板記錄長按時間，創建一個動態面板，命名：記錄時間，創建兩個狀態。設置用例當長按“角色”時，設置“記錄時間”動態面板開始循環，循環間隔100ms。同時，由于長按“角色”時，想讓眼睛變形，所以設置“眼睛”為狀態2，如下：
“記錄時間”動態面板設置
控制“長按時間”文本值范圍在0-10之內，所以設置在“長按時間”＜10情況下執行以下命令。
第一條用例說明：“記錄時間”狀態每改變一次，“長按時間”文本值+1。
第二條用例說明：設置“臉”高度尺寸隨長按時間增長變小。LVAR1變量為“長按時間”元件文字。
第三條用例說明：首先設置“臉紅”元件透明度為0，LVAR1變量為“長按時間”元件文字
步驟3：設置移動
（1）設置元件“角色”，鼠標松開時用例：
首先設置“記錄時間停止循環”，設置變形后的“臉”變回之前的尺寸。
等待執行上述兩操作之后，移動“角色”，距離是“長按時間”×20，動畫線性500ms。
等待500ms移動結束后，移動“角色”回到之前的距離。
設置“眼睛”為之前的眼睛；
設置“臉紅”透明度0；
設置“長按時間”為0。
角色根據長按時間彈起效果
結束語
其他效果大家可以自行研究，有不懂可以提問，大家可以在公眾號獲取原型和素材，或者直接百度云下載：
鏈接：https://pan.baidu.com/s/1EFCeF3tuLk02AR2Wvhd_lA
提取碼：8n8c
作者：suck-mylip
本文由 @suck-mylip 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
看完一篇原型設計文章啦，感覺還是不太會？
想從0基礎開始學習Axure么？推薦你找Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：大禮包
? 領取原型設計大禮包，多學多練，你也能成為原型設計高手哦！