速度変更、音楽同期など面白い機能がいっぱいですよ！ 動画がどれだけインターネット上に溢れようともアニメーションGIFの人気は衰えません。音が出ない、何度も繰り返すと言った特徴が見ている人の心をとらえます。256色までの表現力もノスタルジックで楽しまれるポイントです。 そんなアニメーションGIFを自在に操作するライブラリが<x -gif>です。アニメーションGIFの新しい見せ方を提供するかもしれません。

<x -gif>のデモ

公式サイトにデモがあります。今回はそちらから紹介していきます。

上は普通のアニメーションGIF、下は最後まで描くと逆回転します。

こちらはスピードが変更できるデモです。

音楽と同期させるデモ。こうなるとVine風ですね。

こちらはクリックでスタート/ストップを繰り返すデモ。

一コマずつ書き出すこともできます。

<x -gif>の使い方

使い方としてはまずはJavaScript、スタイルシートを読み込みます。

<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/x-gif/dist/x-gif.html">

後は以下のようなタグで試せるようになります。

<x -gif src="probably_cats.gif"></x>

x-gifというタグを使うのが面白いですね。

<x -gif>を使うとアニメーションGIFをさらにカスタマイズしたりこれまでと違った見せ方ができるようになるでしょう。アニメーションGIFに高度な機能が必要かどうかは分かりませんが、面白いソフトウェアです。

<x -gif>はJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

<x -gif> geelen/x-gif