摘要：但目前白名單申請途徑已經(jīng)關(guān)閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機(jī)自動全屏以及視頻播放完畢會跳出廣告的問題，并且可以實(shí)現(xiàn)交互。

本文在H5動效的常見制作手法的基礎(chǔ)上，對相印的H5動效制作手法進(jìn)行了擴(kuò)展和整理，并結(jié)合案例談?wù)勗趺磳⑵渥龅蒙鷦印?/p> 視頻類 1、體驗(yàn)案例

視頻類h5可以帶給用戶動效逼真，流暢的體驗(yàn)。雖然說制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創(chuàng)造出天馬行空的想法，一些短時(shí)間內(nèi)無法通過代碼創(chuàng)造出的酷炫效果。
首先放上兩個(gè)案例供大家體驗(yàn)。

1） 金館長直播間

實(shí)現(xiàn)還是比較簡單的，交互就是通過用戶點(diǎn)擊無縫切換不同的視頻，基本每個(gè)能按到的tab都可以對應(yīng)一支視頻，讓用戶很有參與感

2） QQ錢包二周年

其中三支視頻的交互在于可以由用戶拖動滑塊，通過設(shè)置currentTime實(shí)時(shí)控制視頻進(jìn)度，拖動到末端時(shí)觸發(fā)視頻播放事件。我覺得也是很有趣的。

想在H5中靈活運(yùn)用視頻，必須對video相關(guān)的屬性、Api有個(gè)大致的了解，這里首先對最基本的進(jìn)行普及一下。

1） 標(biāo)簽屬性

src ：視頻地址

width height ：視頻寬高(px) h5中可指定為當(dāng)前設(shè)備屏幕寬高

poster：視頻封面，沒有播放時(shí)顯示的圖片

preload：預(yù)加載

autoplay：自動播放

loop：循環(huán)播放

controls：瀏覽器自帶的控制條

webkit-playsinline="true" | playsinline ： 禁止 iPhone Safari 視頻自動全屏

x-webkit-airplay="true"支持Airplay的設(shè)備（如：音箱、Apple TV)播放

2） video DOM常用相關(guān)屬性及方法

以上說的是比較常用的方法屬性，更詳細(xì)的可參考HTML5 Audio/Video 標(biāo)簽,屬性,方法,事件匯總

說了這么多，來看看一些難以繞過的坎。其實(shí)相信很多同行在H5上運(yùn)用video時(shí)，得到的效果未必那么近乎人意。

其中視頻類H5很大的一個(gè)坑是：在微信X5瀏覽器打開時(shí)，視頻會自動全屏播放，并且結(jié)束時(shí)會出現(xiàn)騰訊視頻的廣告。

目前在IOS下這兩個(gè)問題已經(jīng)得到了解決：即在標(biāo)簽下添加屬性webkit-playsinline="true"和playsinline

部分安卓機(jī)可以通過這兩個(gè)屬性解決。但有些還是不行。具體什么機(jī)型，待測試…

這個(gè)問題是由于微信團(tuán)隊(duì)對視頻來源進(jìn)行了域名限制，只有掛載在qq域名下的H5才能避免上述的問題。但目前白名單申請途徑已經(jīng)關(guān)閉。在等待未來的更新能把這個(gè)問題解決的同時(shí)，針對安卓機(jī)，根據(jù)前輩經(jīng)驗(yàn)，有以下這兩種嘗試方法。

1） 使用canvas實(shí)時(shí)繪制
細(xì)節(jié)可參考 HTML5 視頻直播
本人嘗試過使用上文提到的jsmpg.js解碼，可行性比較高。但是聲音就無法由canvas播放了。
*注意jsmpg.hs只支持解碼mpeg格式的視頻。所以需要使用ffmpeg 對非mpeg格式視頻進(jìn)行轉(zhuǎn)換。

核心js：

var canvas = document.getElementById("jsmpegCanvas");
var player = new jsmpeg("mov.mpg", {canvas:canvas, autoplay:true, loop: true});

其主要思路是利用js將video實(shí)時(shí)解碼，再利用canvas渲染幀。由于提到的兩個(gè)js轉(zhuǎn)換器沒有提供設(shè)置canvas寬高的Api，所以可以嘗試通過scale使canvas全屏。

之前有嘗試過在同一個(gè)頁面里讓video播放，visibility設(shè)為hidden，直接利用requestAnimationFrame對每一幀進(jìn)行canvas的drawImage。然而在安卓下只要有播放的video就仍然會自動全屏。

2） 目前在安卓有一種同層播放器的解決方案。可解決安卓機(jī)自動全屏以及視頻播放完畢會跳出廣告的問題，并且可以實(shí)現(xiàn)交互。

通過video屬性x5-video-player-type聲明啟用同層H5播放器?

使用x5--video--player--fullscreen自己重新適配新的視口大小 因?yàn)槟J(rèn)是進(jìn)入全屏播放。

但發(fā)現(xiàn)在video+滑屏觸發(fā)時(shí)，發(fā)現(xiàn)存在很明顯的閃屏現(xiàn)象，并且不能自動播放。還有一個(gè)問題是video在播放時(shí)，背景音樂會失效。該方案仍有待測試，歡迎各位同行交流。

純CSS3的H5可以參考VM團(tuán)隊(duì)的那幾個(gè)。僅僅利用CSS3制作出非常炫酷的效果，必須對CSS3的運(yùn)用非常純屬才行。
之前寫過一篇關(guān)于CSS3打造H53D方面的文章，大家可以參考下。
3D無疑是CSS3在H5中的一種靈活運(yùn)用方式。再提一下其他的CSS3表現(xiàn)形式。

看一個(gè)案例——陌陌宣傳H5

截圖是某部分動畫的序列幀，雖然不是特別連貫，但體驗(yàn)的效果并不差。

這里的實(shí)現(xiàn)方式是通過JS每隔一定時(shí)間切換class改變背景圖的background-position
放上一個(gè)Demo大家體驗(yàn)

除了通過JS實(shí)時(shí)控制以外，還可以使用CSS3的animation 。

首先需要將每一幀拼接成雪碧圖，這里的例子還是使用上述圖片。

通過keyframes設(shè)置每幀的background-position 需要把每一幀都寫入，較為繁瑣

@-webkit-keyframes fresh {
    0% {
        background-position:-600px -1467px;
        }
    4.34% {
        background-position:-600px -978px;
        }
    ...
    100% {
        background-position:-900px -489px;
        }
    }

在.bg下添加animation屬性

    animation: fresh steps(1,end) 4s infinite;
    -webkit-animation: fresh steps(1,end) 4s infinite;
    

另外有一種比較簡單的方法，需要將每一幀按順序拼合好雪碧圖。如雪碧圖從左至右必須是連貫的幀。比如這種

代碼寫成如下形式便可

   @-webkit-keyframes fresh {
    0% {
        background-position: 0 0;
        }
    100% {
        background-position:-900px 0;
        }
    }

    animation: fresh steps(4,end) 4s infinite;
    -webkit-animation: fresh steps(4,end) 4s infinite;

補(bǔ)間動畫用CSS3表現(xiàn)起來就是最基本的transform結(jié)合 transition animation形成位移、形變、旋轉(zhuǎn)等動畫。可以將逐幀動畫以外的旋轉(zhuǎn)變換動畫看成是補(bǔ)間動畫。

想要做出能吸引用戶的補(bǔ)間動畫，可以從以下四個(gè)方面入手。

1） 明確每一個(gè)物件在每一時(shí)刻的動效

動畫屬性分解表 （via ISUX-H5動效的常見制作手法）

2）使用《動畫十二法則》
建議細(xì)讀 譯文-網(wǎng)頁動畫的十二原則，了解動畫制作的必要元素，怎么使自己做出的動畫連貫自然。動效可以異想天開，盡可能夸張，但還是得復(fù)合物體的物理運(yùn)動規(guī)則。

十二法則在h5動效上用得比較多的有
擠壓、拉伸，預(yù)備動作，夸張，彰顯特性，跟隨，節(jié)奏等

看兩個(gè)小案例

關(guān)注最左邊紅色小罐

下落時(shí)先有個(gè)向右的傾斜動畫，再倒向左邊。這符合預(yù)備動作

然后抖動幾下才緩緩?fù)Ｏ拢?strong>緩出效果

如果紅色小罐下落到觸地有個(gè)拉伸擠壓的過程，會使動畫顯得比較Q彈

而最右邊的葡萄酒瓶，里面的酒跟隨著酒瓶的運(yùn)動。

天鵝上下漂浮，節(jié)奏起伏滿足正余弦函數(shù)，符合在水中緩緩浮沉的感覺

漣漪慢慢擴(kuò)散 人物的發(fā)箍跟隨她上下起伏

圖片來自追波和站酷，侵刪。

3）關(guān)注轉(zhuǎn)場動畫
轉(zhuǎn)場動畫運(yùn)用了《動畫十二法則》逐幀法則，目的是使場景轉(zhuǎn)換變得前后有一定的銜接性，可用于H5某一屏的切換還有某一些響應(yīng)用戶行為的動作。所以很多時(shí)候可以將簡單的每屏推進(jìn)推出，換成一種前后有關(guān)聯(lián)的形式進(jìn)行場景切換。

這篇文章已經(jīng)將思路理得很清晰，這里就不再細(xì)說了。
功能性動畫UX設(shè)計(jì)——打造優(yōu)秀的過渡轉(zhuǎn)場效果

4）善用工具
10 個(gè)值得前端收藏的 CSS3 動效庫

還有一個(gè)比較常用的工具 貝塞爾曲線CSS生成
貝塞爾曲線可用于animation或者transition的time-funtion上，可形成某些比較特殊的動畫效果。看一個(gè)運(yùn)用實(shí)例 貝塞爾曲線制作彈性動畫

其實(shí)原理十分簡單
上圖的運(yùn)動可以用下面這個(gè)貝塞爾曲線表示，其中曲線的斜率可看成速度，這樣就好理解了。

今天先談到這里，下篇文章會帶來H5 SVG的玩法。
^^感謝您的閱讀。