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

本文在H5動效的常見制作手法的基礎上，對相印的H5動效制作手法進行了擴展和整理，并結(jié)合案例談談怎么將其做得生動。

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

1） 金館長直播間

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

2） QQ錢包二周年

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

想在H5中靈活運用視頻，必須對video相關的屬性、Api有個大致的了解，這里首先對最基本的進行普及一下。

1） 標簽屬性

src ：視頻地址

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

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

preload：預加載

autoplay：自動播放

loop：循環(huán)播放

controls：瀏覽器自帶的控制條

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

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

2） video DOM常用相關屬性及方法

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

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

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

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

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

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

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

核心js：

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

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

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

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

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

使用x5--video--player--fullscreen自己重新適配新的視口大小 因為默認是進入全屏播放。

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

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

看一個案例——陌陌宣傳H5

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

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

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

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

通過keyframes設置每幀的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;

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

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

1） 明確每一個物件在每一時刻的動效

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

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

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

看兩個小案例

關注最左邊紅色小罐

下落時先有個向右的傾斜動畫，再倒向左邊。這符合預備動作

然后抖動幾下才緩緩停下，符合緩出效果

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

而最右邊的葡萄酒瓶，里面的酒跟隨著酒瓶的運動。

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

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

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

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

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

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

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

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

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