ここ数年でアニメーションGIFの価値が見直されています。動画とは違ってハイライト部分だけを取り上げていたり、何度も繰り返せるのが魅力になっています。動画は再生までの手間がありますが、アニメーションGIFは自動的に再生もできます。 そんなアニメーションGIFをWebブラウザで操作できるのがAnimated_GIFです。

Animated_GIFの使い方

Animated_GIFは任意の画像を使ってアニメーションGIFを生成できます。

再生速度や画像加工も加えることもできます。

サンプルコードは次のようになります。

var imgs = document.querySelectorAll('img');

var ag = new Animated_GIF(); 
ag.setSize(320, 240);

for(var i = 0; i < imgs.length; i++) {
    ag.addFrame(imgs[i]);
}

var animatedImage = document.createElement('img');

ag.getBase64GIF(function(image) {
    animatedImage.src = image;
    document.body.appendChild(animatedImage);
});

addFrameに画像を追加していくだけなのでとても簡単に使えるでしょう。できあがったアニメーションGIFは画像としてダウンロードもできます。クライアントサイドだけでできるのはシンプルで使い勝手が良さそうです。

Animated_GIFはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Animated_GIF sole/Animated_GIF: Javascript library for creating animated GIFs