イラスト・オブジェクトの動き
-GIFアニメーション-

デモページを見る

See the Pen 9-1 GIFアニメーション by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね!

動きを実現する仕組み

仕組み ⇒ 1枚の動く画像
長所 ⇒ 古いブラウザにも対応。オンラインジェネレーターなどの制作ツールで比較的簡単に制作できる。
短所 ⇒ 最大256色しか使用できない。色の境界がギザギザする。画質が粗い。

オンラインサービス「Ezgif.com(https://ezgif.com)」を利用して制作。
パラパラ漫画のようにコマ送りで複数の画像を組み合わせてGIF形式のアニメーション画像をつくる。

作り方

① 動かすコマを、画像制作ソフトを使ってコマ数分作る。
カンバスサイズは全てのコマで同じサイズにし、画像を少しずつ動かしてコマ数分を制作。
サンプル(※サンプルデータ:https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/9-1/design_file.zip)は、Adobe Photoshopを使い、W500px x H500pxのカンバスで9コマ分制作。

GIFアニメーションの作り方

 

② 制作したコマは、GIF形式(透過)にして書き出す。
「ファイル」→「書き出し」→「Web用に保存(従来)」→書き出し形式:GIF、カラー:256色、
マット(背景とイラストの境界をなじませる色):白、透明部分:チェックあり⇒保存

GIFアニメーションの作り方

③ オンラインサービス「Ezgif.com(https://ezgif.com)」にアクセスし、「Gif Maker」⇒「ファイルを選択」ボタンをクリック。
②で制作したコマ送りのGIFをすべて選択して「開く」を押す。
画像がアップされたら「Upload and make a GIF!」ボタンを押す。

GIFアニメーションの作り方

④ アップロードされた画像の各コマのDelay部分に、コマを遅らせたい秒数を1/100秒単位で入れる。
※画像をドラッグ&ドロップすると順番の入れ替えも可能。

GIFアニメーションの作り方

⑤「use global colormap(すべてのフレームに同じ色をセットし、ファイルサイズを小さくする)」と
「don’t stack frames(フレームを重ねて書き出さないようにする)」にチェックを入れ、
「Make a GIF!」ボタンを押すとプレビュー画像が下に表示される。最後に「Save」ボタンを押し、GIFアニメーション画像を保存。

※「Make a GIF!」ボタンはプレビューを確認しながら内容を変更後、何度でも押すことが出来る。
※「use global colormap」の上にあるLoop countの値を1とすると、1度だけアニメーションをする画像になる。

GIFアニメーションの作り方

完成したGIFアニメーションを再生したい時は、ブラウザにGIF画像をドラッグ&ドロップして動きを確認。

バリエーション
を見る

「印象」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top