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

vxplo-hanhan-h5-1

詳細步驟:

第一步:登錄網站

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

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

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

vxplo-hanhan-h5-2

第三步:添加素材

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

vxplo-hanhan-h5-4

第四步:設置打字出現的效

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

vxplo-hanhan-h5-4

第五步:添加打字機動畫

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

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

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

vxplo-hanhan-h5-5

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

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

vxplo-hanhan-h5-6

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

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

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

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

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

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

sdcweixin

點贊
收藏

發表評論 已發布 1

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏