2 交互式動(dòng)畫

2 交互式動(dòng)畫

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

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

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

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

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

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

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