[Polymer] x-gif 元件，動態調整 gif 圖檔播放速度！

2014-06-27

5255
0

摘要:[Polymer] x-gif 元件，動態調整 gif 圖檔播放速度！

這篇主要介紹一個可以調整 gif 圖檔速度的元件：x-gif，有測試有真相：可以利用拉霸調整 gif 速度，乒乓效果、分解圖 ( 使用 EZoApp ，按下 preview 可以預覽 )

前幾天 Google io 大會剛剛發表，稍為閱讀了一些在大會中所介紹到的 polymer，發現不少的開發者開始投入，使用 polymer 開發元件，當中有一套名為 xgif 的元件，就是可以動態的控制 gif 速度。對於視覺設計師而言，以前我們要控制 gif 的速度，往往要打開 photoshop，然後把動畫面版打開，就可以手動調整 gif 給個影格的間隔時間，如果要讓 gif 反轉，則是全選影格然後反轉影格...等，反覆來回的測試，才能在網頁或 App 的表現有最佳的體驗。( 例如：一個 news 閃爍的 gif，就有 0.1 秒閃爍和 0.2 秒閃爍的不同體驗 )

使用了 xgif 這個元件之後，身為一個視覺設計師的世界頓時豁然開朗，只需要設定速度的數值，就可以控制 gif 的播放速度，增加了參數，就可以讓 gif 正反交錯播放，甚至可以逐格將 gif 解析出來，以下就來介紹一下該怎麼使用這個元件：

首先當然要載入 platform.js，不過因為我這邊使用了 EZoApp 這套開發工具，polymer 完整支援，所以這部分我們就不用煩惱了，接下來就是直接看到 xgif 這個利用 polymer 開發的元件 ( 也可以從左邊元件面板拉出來 ) 拉出來之後，可以看到程式碼 <xgif></xgif> 就是 xgif 元件，包含了許多可以調控的參數：

src ：動畫檔的路徑 ( 好像有時候會有伺服器的跨域問題 )
speed：顧名思義調整速度，可從 0 一直往上加，1 就是 gif 本身的預設速度，數字越大越快速
fill：是否要填滿畫面 ( 超過好像就會被切掉 )
ping-pong：讓動畫播完之後自動倒帶
exploded：把動畫分解圖一張張展現出來

這是我自己測試的程式碼：

<x-gif id="ID" is="x-gif" src="圖片路徑" speed="1" fill="true" ping-pong></x-gif>

如果要使用 stop/start 的功能，記得還要在 javascript 的地方補上

window.addEventListener('polymer-ready', function(e) {

document.querySelectorAll('x-gif').array().forEach(function (el) {

el.addEventListener('click', function () {

el.stopped = (el.stopped == null) ? true : null;

})

});

接著就可以點選動畫讓動畫暫停，或是在標籤內預加 stopped 讓圖片一開始就是暫停，點選後再開始播放，其實還有很多有趣的功能，例如讓動畫跟隨音樂播放 ( 我找到的小動畫都太短不適用的樣子 )，大家可以上 xgif 的官方介紹看看 http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif

最後再看一次 xgif 的效果：利用拉霸調整 gif 速度，乒乓效果、分解圖 ( 使用 EZoApp ，按下 preview 可以預覽 )

回首頁