今日頭條：少年π的虎口歷險

2017-08-24 H5案例 H5 H5頁面視頻逐幀動畫秋老虎插畫今日頭條西瓜視頻

來看看近日頭條為旗下的西瓜視頻app所打造的一款宣傳h5是怎么虎口歷險的！雖然早已過立秋，可高溫“秋老虎”的威風(fēng)絲毫不減?？釤嶙儺悺⒆茻釤?、馬路熔巖、墜日滾燙、泳池沸騰，當(dāng)世界變成熾熱的煉獄，少年π怎么“虎口脫險”呢？

今日頭條：少年π的虎口歷險.jpg

創(chuàng)意分析

這款h5，講述了因?yàn)榉?，從而?dǎo)致少年π的小貓咪變異成老虎，繼而少年π由此逃亡，接著遇到一些眾多高溫離奇事件的故事，首先開場白，顯示高溫正在進(jìn)行。少年π的小貓變成老虎，嚇得少年π不得不逃跑，點(diǎn)擊按鈕逃跑即可逃跑，進(jìn)入下一個畫面，少年π飛奔太空，天太熱衣燒沒了。點(diǎn)擊回血按鈕，少年π恢復(fù)正常以后，進(jìn)入馬路熔巖，熱的不行。點(diǎn)擊冷卻按鈕恢復(fù)正常以后，又進(jìn)入了墜日滾燙，點(diǎn)擊遮陽，恢復(fù)正常以后，進(jìn)入泳池，沒想到連泳池都是滾燙的，繼續(xù)求助，點(diǎn)擊高溫按鈕，恢復(fù)正常，經(jīng)歷了這么多，最終老虎變回了小貓咪，最后以“西瓜視頻可以解暑”的妙招推出自己的宣傳產(chǎn)品。

技術(shù)實(shí)現(xiàn)

在繪畫技術(shù)上，整支H5運(yùn)用到了動畫表現(xiàn)形式，準(zhǔn)備了豐富的動畫場景，趣味連連。

在H5技術(shù)實(shí)現(xiàn)上，運(yùn)用到視頻表現(xiàn)，動畫和動畫幀，事件觸發(fā)。

視頻：用插畫的表現(xiàn)，和動畫場景完成的視頻?？梢灾苯釉谌巳诵闫脚_插入視頻。這個比較簡單。

動畫：動畫豐富流暢，畫面中多出動態(tài)是可以直接在平臺進(jìn)行實(shí)現(xiàn)。個別復(fù)雜動效也可以使用動畫幀或者自己上傳gif圖實(shí)現(xiàn)。

事件觸發(fā)：在每一次歷險經(jīng)歷后需要點(diǎn)擊按鈕進(jìn)入下一個畫面，就用到了事件觸發(fā)，可以在人人秀平臺直接實(shí)現(xiàn)。

查看教程：視頻教程