GIFアニメーションといえば、アニメーションするGIFファイルを表示するのが一般的です。
今日は、別の方法をご紹介します。
下の画像をご覧下さい。GIFアニメーションの全てのスライドが一枚のGIFファイルに入っています。当然、これではアニメーションにはなりません。
これをアニメーションとして出力したものが下のリンクです。
JavaScriptを使って、画像をアニメーションとして出力
いかがでしょうか。まるでアニメーションGIFのファイルを見ているように感じると思います。しかし、実際には、上の画像を表示しているだけです。したがって、GIFアニメとして表示されているものをダウンロードしたとしても、それは、GIFアニメではなくただの画像ファイルだと言うことです。
このような方法を採るメリットとは何なのでしょうか。
少なくとも、せっかく作ったGIFアニメを他の人にパクられる恐れはかなり少なくなるのは間違いありません。
実は、これはPNGアニメーションにも対応しているので、SNS関係でアプリを作っている方には貴重な情報かも知れません。
以下で、具体的な作り方をご紹介します。webサービスを使うので、とても簡単にできます。
作り方
- 『animizer.net』にアクセスします。
- お手持ちのアニメーションGIFファイルをアップロードします。（画像の①）
- アップロードが完了したら、下の方にある『Generate animation』ボタンをクリックします。（画像の②）
- 次に、右側にある[Additional download options:]で下図のように二ヶ所にチェックを入れて、[Download]ボタンをクリックしてダウンロードします。（画像の③）
基本的には、これだけです。
上の画像の④のスライダーでGIFアニメーション全体の時間を調整できます。
また、その下にある⑤[Modify frame settings]ボタンで、フレーム毎の時間調整が可能です。
しかし、もともと完成したGIFアニメを変換するので、このような操作は基本的には不要なはずです。
ダウンロードしたフォルダには、[preloader_JS.html]というファイルと、[images]というフォルダの中の[sprites.gif]というファイルがあります。ファイルは全部で二つだけです。
[sprites.gif]ファイルをブログにアップロードします。そのパスをメモします。
次に、 [preloader_JS.html]をメモ帳で開き、上でアップロードした[sprites.gif]のパスを書き込み上書き保存。その後で、この [preloader_JS.html]をブログにアップロードします。
手順は以上です。
この手法は、JavaScriptを使って、画像をGIFアニメーションとして出力する方法でもあるのですが、やはり、手間暇かけて完成したGIFアニメを簡単には流用させないという目的での利用が主体かなぁと思います。
上の掲載した画像ファイルからGIFアニメを作れと言われたら作りますが、実際はやりたくありません。きれいにできないからです。この意味で、コンテンツの無断流用防止、あるいは、販売用のスマホアプリPNGアニメのデモ用として使えるかも。
