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

詳細步驟：

第一步：登錄網(wǎng)站

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

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

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

第三步：添加素材

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

第四步：設(shè)置打字出現(xiàn)的效果

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

第五步：添加打字機動畫

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

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

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

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

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

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

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

簡單的五步操作就能將這樣一個很有創(chuàng)意很酷炫的H5頁面作品做出來了，而且不需要寫任何代碼，是不是很簡單？小伙伴們有沒有g(shù)et到這個新技能呢?，F(xiàn)在可以就登錄www.vxplo.cn試一下哦！

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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