不用編碼！互動大師教你輕松制作酷炫的H5頁面案例

前段時間某品牌手機的廣告里，用逼真的打字效果"一步一步看清韓寒"。其實設計師，不用寫編碼，也可以做出一樣的效果。

詳細步驟：

第一步：登錄網站

登錄VXPLO互動大師官網（www.vxplo.cn）。在我的作品里，創建一個新的手機案例，根據需要調整舞臺大小（大多數手機像素是640*1008，iPhone4的是640*832，iPhone5/5S的是640*1008，iPhone6的是640*1030，iPhone6+的是640*1040），互動大師默認的舞臺大小是640*1008，該案例是以大多數手機尺寸為準，就不需要再調整舞臺大小了。

第二步：新建一個手機案例

在我的作品里，創建一個新的手機案例，根據需要調整舞臺大小（大多數手機像素是640 * 1008，如果要匹配iPhone6，可以調為640 * 1030，iPhone6+的是640 * 1040），互動大師默認的舞臺大小是640*1008。這個案例是以大多數手機尺寸為準，就不需要再調整舞臺大小了。

第三步：添加素材

在舞臺下添加樸樹的平凡之路音樂素材，音樂屬性設為自動播放YES，同樣添加打字機聲音的音樂素材，音樂屬性設為自動播放NO（因為只有在打字機動的時候才有聲音）。添加時間軸1（根據這個案例的需要，將時間軸的自動播放和循環播放屬性設置為NO，時間軸時長設為65s），在時間軸下添加1、2、3、4、5圖片素材，即打字機中出現的圖片，讓這些圖片成為時間軸1的子對象。同樣的方法添加時間軸2，并在它下面添加打字機的GIF圖片。

第四步：設置打字出現的效果

選中時間軸1下的每張圖片，點擊工具欄中的軌跡按鈕為每張圖片添加軌跡。然后在軌跡上添加圖片運動的關鍵幀。例如，選中圖片1的軌跡添加關鍵幀，控制圖片1的運動。在這個案例中，這些圖片是從下到上出現的，所以只需要選中關鍵幀，修改圖片的Y坐標就可以達到向上運動的效果。比如在圖片1軌跡1中，0秒關鍵幀時，圖片1的坐標為（0, 950），在1秒的地方，添加另一個關鍵幀，并設置圖片1的坐標為（0, 200），這樣圖片1就在1秒的時間內從Y坐標為950的位置向上移動到了200的位置，即視覺上打字機中的圖片向上慢慢出現了。照此方法，用時間軸2添加打字針的運動效果，要注意，打字針是左右運動。

第五步：添加打字機動畫

選中舞臺，添加透明按鈕1，區域為"按下看清每一步"的大小，或可以拉得更大。添加透明按鈕的遠影是避免iPhone中由于長按圖片會自動跳出保存圖片的指令。

在透明按鈕下添加事件，事件是交互中的核心，首先你需要梳理清楚事件的觸發條件，即用戶做了什么動作觸發了什么效果，即目標對象是什么，目標效果是什么。在這個案例中，以事件1和事件2為例，用戶的動作是長按底部按鈕時，打字針會左右運動，同時打字機中的圖片向上出現，當手指離開的時候，打字針停止，打字機中的圖片也停止向上。

按這個邏輯，設置在透明按鈕下插入四個事件，

事件1為手指按下，0秒，目標對象時間軸1，目標動作為繼續播放。

事件2為手指按下，0秒，目標對象時間軸2，目標動作為繼續播放。

以上兩個事件控制打字機在手指按下的情況下，會有打字針左右運動，打字機中的圖片向上運動的效果。

用同樣的邏輯，可以設置控制打字機的音效。讓我們來看一下這樣完成的這個作品的效果。點擊這里預覽。

簡單的五步操作就能將這樣一個很有創意很酷炫的H5頁面作品做出來了，而且不需要寫任何代碼，是不是很簡單？小伙伴們有沒有get到這個新技能呢。現在可以就登錄www.vxplo.cn試一下哦！

注明：本教程中的案例創意及素材來自1+手機。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量97萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：