読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

GIFアニメーション

アニメーション

  • 「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉
  • 一般的に、本来静止している絵を生きてるかのように動かす技術
  • 歴史的には、1830年プラトーの作ったフェナキスティスコープや、ホーナーの考案したゾートロープまで遡ることができます


ジョセフ=プラトーのフェナキスティスコープ用円盤



この時代から現在に至るまで、アニメーションに利用される原理は変わらず、そのほとんどが間欠運動あるいは仮現運動と呼ばれる眼の残像効果を利用した錯視に基づいています。
いわゆる「パラパラ漫画」と同じ原理です。

  • 【間欠運動】運動が時間とともに持続するのでなく、ある時間経過すると停止し、停止したのち、ふたたび運動が開始することを繰り返す運動


コンピュータが利用される以前は、これを透明のセルロイド板に描画することで実現していたため、「セルアニメーション」と呼ばれていました。
描画用シートは、その後不燃性のアセテートに変わりましたが、用語として使用されています。

物理法則を利用する

自然な動きに見せるためには「物理法則」を利用します。

縦方向の動きは重力を意識した動きにする
  • 落ちるときは加速する
  • あがるときは減速する

※はずむアニメーションの場合、材質も考慮にいれます。

横方向の動きは慣性の法則を利用する
  • 加速するときの移動距離
  • 減速するときの移動距離
  • 摩擦による減速
「つめ」と「のこし」

あるものが動くアニメーションは、動きの始めと終わりの間に何枚かの絵を描いたり「トゥイーン機能」を利用して作成します。


GIFアニメーション

アニメーションの原理は「パラパラマンガ」です。
人間の視覚特性(残像)を利用して動いているように見える仕組みです。



  • 画像形式「GIF」の拡張仕様の一つで、動画を扱う形式。
  • 一つのファイルの中に複数のGIF画像を保存し、それらを順に表示していくことで動画を表現している。
  • GIF形式で圧縮しているためサイズが小さく済むことから、インターネット上でもバナー広告などに簡易な動画として利用されている。
  • その方式上音声を扱うことはできず、複雑な動画には向かない。



※このデータを右クリックダウンロードしてPhotoshopで開きます。
※レイヤーによって、どんな構造になっているかが見ることができるはずです。

Flashとの違い

 ・画像のみしか扱えない。音声は扱えない。
 ・ブラウズには「プラグイン」が必要ない。

GIFアニメの作成手順

(1)Illsutaratorで「パラパラマンガ」の1枚づつをレイヤーを重ねて作る。
  ※動かない部分と動く部分を区別して描く。
  ※レイヤーの複製をして、下のレイヤーをそのまま利用する。
(2)「ファイル」→「書き出し」:PSD形式
  ※「RGB」「72ppi」「レイヤーを保持」がチェックされていること。
(3)書き出された「PSD」形式ファイルを、Photoshopで開く
(4)パレットオプションで「レイヤーからフレームを作成」を選択する。
(5)各フレームの時間を設定する。
(6)ブラウザで動作確認をする。
(7)最適化ファイルを「GIF」形式で保存する。


Illustratorのレイヤーを利用する

RGBモードでイラスト描く


(1)レイヤー1」に描いたイラストをレイヤー複製をします。


(2)イラストを変化させて、また複製を繰り返します。
 


(3)イラストをPhotoshop形式に書き出します。


 


(4)Photoshop書き出しオプションを設定します。



(5)アニメーションパレットを表示します。

 


(6)Photoshopでレイヤー管理をします。
  Illustratorでグループにしなければ、グループフォルダーにはなりません。

  CS以降ではオブジェクトのグループがフォルダーとして書き出されます。
  その場合は、グループを統合して1枚の画像とします。

 


(7)アニメーションパレット→オプション
※「レイヤーからフレームを作成」



(8)Shiftキーでフレーム全体を選択し、表示秒数を設定します。



(9)Web用に保存→「GIF形式」

 

 完成サンプル


GIFアニメ:キャラクターを動かす

キャラクターを動かす場合、Illustator・Photoshopともに、動きの元となる画像がレイヤー分けされていることが前提となります。

「あいうえお・ん」と口が動くことを繰り返すアニメーション



  • 最後にすべてのフレームの速度設定をする。
  • 「Webデバイス用に保存」→ファイル形式「GIF」で保存する。

広告を非表示にする