gifアニメーションとは
最近はSNSブームの関係でgifアニメーションが見直されているようだ。
基本的に動画ファイルではなく画像ファイルの拡張なので、動作やサポート状況は画像ファイルに準じ、これが長所にも短所にもなる。また、GIF 共通の長所・短所もある。
長所[編集]
製作者と閲覧者双方にとっての簡便さが最大の長所である。古くから多くのウェブブラウザで標準サポートされており、プラグイン等は不要である。
動画編集ソフトもウェブプログラミングも必要ない。必要な静止画と、簡単な変換ツールがあればいい。
HTMLでの記述も通常の GIF 画像同様の <img> タグや <a> タグが使える。
背景を透過できる（GIF 共通の機能）。短所[編集]
さまざまな理由から、大規模な動画には向かない。画像以外のストリームを持たない。特に、音声ストリームを持たない。
最大 256 色 (=28) しか使えない。そのため、自然画の表現は難しい。
フレーム間圧縮がない。
同じフレームの再利用はできる。また透過機能を利用して差分画像だけのフレームにすることで圧縮率を上げることもできるため、間接的にフレーム圧縮に近いことはできる。
多くのムービープレイヤーでは再生できない。
Windows VistaやWindows 7 では、標準添付のフォトビューワで表示されない。
そのおかげで、いろいろなオンラインツールも出ている。
それらを利用して、炎が燃え上がるアニメーションを作ってみた。
動画を用意する。
炎が燃える動画は、こちらの素材集から拝借した。
切り抜き文字を作る
黒背景で、文字の部分が透明になったpngファイルをpixelmator PROで作る。
マスクを使うだけ。
imovieで合成
imovieにこの2つを読み込み、編集する。
3秒ほどでいいかな、あまり長いとファイルが大きくなりすぎるし。
mp4で書き出す。
gif変換
こちらのサイトで、mp4をgifアニメーションに変換する。
MP4 to GIF Online (100% Free) Converter — mp4togif.onlineから引用
できあがったgifをダウンロードする。
しかし！
思ったよりファイルが大きい。
gifの最適化
そこで、こちらのサイトでgifを加工する。
サイズを小さくすると、効果抜群だ。
実装
できあがったgifアニメーションを、トップページに置く。
<p id="amiens-05-consulting"><img src="https://amiens.jp/wp-content/themes/stinger8-child/images/consulting-1x.gif" srcset="https://amiens.jp/wp-content/themes/stinger8-child/images/consulting-1x.gif 600w,https://amiens.jp/wp-content/themes/stinger8-child/images/consulting-2x.gif 1200w" alt="consulting"></p>
なんか中二っぽいが、気にしない（笑）
