2 交互式動畫

可口可樂這個案例在之前的風(fēng)云榜中推薦過，是運(yùn)用H5繪圖功能的典型例子。當(dāng)然這里面的交互還是比較簡單的，只不過它基本體現(xiàn)了交互式動畫的感覺。整個可口可樂的時間軸是隨著用戶向上滑動頁面“繪制”出來的。

其實除了這種敘事型的H5動畫，我們能看到的大多數(shù)H5游戲也都都屬于這一類，比如神經(jīng)貓、打企鵝、2048等等。最近也有一個比較火的H5游戲叫“財務(wù)包子鋪”，在這個游戲中用戶扮演包子鋪的創(chuàng)業(yè)老板，在事業(yè)發(fā)展的不同階段做出經(jīng)營決策，最終登上人生巔峰。雖然游戲中植入了赤裸裸的產(chǎn)品推廣（知乎的一本新書），但最后還是取得了3天破300萬PV的成績。

些類型各異的H5應(yīng)用，本質(zhì)上都是基于H5的動畫技術(shù)做的。它們所涉及的相關(guān)動畫技術(shù)主要有H5的Canvas/SVG，以及JS、CSS3，目前大部分H5的動畫效果還是用JS實現(xiàn)的，實現(xiàn)的效果類似PPT中的動畫功能，只能實現(xiàn)元素的平移、旋轉(zhuǎn)、隱現(xiàn)等等。事實上通過JS+Canvas/SVG+CSS3可以實現(xiàn)非常復(fù)雜的交互式動畫，最直觀的就是H5游戲，比如神經(jīng)貓，還有上文提到的3D版坦克大戰(zhàn)。那么，H5到底能實現(xiàn)什么樣的動畫效果呢？我想這應(yīng)該是大家在做H5時最頭疼的問題，因為不知道能做成什么樣，你也就不知道從何下手。所以下面我給大家介紹一個網(wǎng)站：http://fff.cmiscm.com/，在這個網(wǎng)站中，你幾乎能看到所有H5能夠?qū)崿F(xiàn)的動畫效果，下次如果需要做H5的時候就可以跟開發(fā)說“你看，就是這個效果”。以下是該網(wǎng)站上幾個示例的截圖：

抓綿羊：你可以在奔跑的羊群中隨意抓取并放到任意位置

種樹：在屏幕任意地方點(diǎn)擊都會在相應(yīng)的地方種一顆樹，你可以看到樹的生長過程。

3D罐頭：CSS3 3D的完美展示，你可以看到三維罐頭的任意角度

照片處理：你可以把照片藝術(shù)化，圖示為處理過程截圖