WebアニメにはCSSとJavaScriptを使おう | from opensource.com

法律: IT 映像制作 アニメ アニメーション オープンソース ウェブ制作 フノス(訳者)

2016年9月27日投稿   Nikhil Sukul

 DrupalCon Dublin 2016にて、私ことNikhil SukulはVidit Anjariaとアニメーションについて議論する予定です。

 

 アニメーションの基本

 歴史

  最初のアニメーションの原型は、5000年前のイランの陶器製のボールにありました。それから1500年代には、レオナルド・ダ・ヴィンチがアニメーションについての図解を著しています。そして現在のようなアニメーションを最初に始めた人物としてはウォルト・ディズニーあたりが有名ではないでしょうか。

 

 定義

  多少の違いはあれど、アニメーションとは、「線画やキャラクターの姿を描いた絵を連続させて、まるで動いているように見せる技法」のことを指します。
  我々の肉眼では、1秒に60フレーム以上の速さで動いている物体をバラバラのものとして認識することはできません。
  CGのウェブアニメだろうとそれは同じことで、1秒に60フレーム以上の比率で連続した絵を見せさえすれば、それはアニメになります。
 
 

 アニメ基本原則

 ここでアニメーション12の基本原則についてざっとおさらいしましょう:潰しと伸ばし、予期動作、演出、大まかな動作とそれをつなげる動作、最初に動く部分とそれの後を追う部分があること、ゆっくり入ってゆっくり終わる、動きは曲線にすること、二次動作、コマを送るタイミング、誇張、立体的な描写、アピール。

 このうち4つについてちょっと解説しますね。

 予期動作:次に起こる動作を予測させる動作描写のことです。
 例えば、まきを割る動作を描くとして、まきを割る前にその人物が斧を頭の上にまで振り上げた方が、これから木を割ろうとするすさまじい力を表すことができますよね。そして、この「斧を頭の上に振り上げる」動作が「薪を割る」ことの予期動作になっているのです。
 他の例を挙げてみましょう。たとえば、ただ単にボールを投げる動作を描くとしても、ボールを投げる前に「野球のピッチャーのような動き」を入れれば、これから「何かを投げるんだ」ということはばっちり伝わります。

 二次動作:一つの動作に連鎖しておこる動作のことです。
 たとえば、地面に落ちたボールが跳ね上がる動作があるとしましょう。ボールが地面に落ちたのが第一の動作だとして、それが跳ね上がったのは第二の動作といえます。
 他の例を挙げるなら、プールに誰かが飛び込んだあとに、水しぶきが上がることは二次動作といえます。

 演出:アニメには様々な要素がありますが、その中でも「これを目立たせたい」というものを1つにしぼって、何らかのハイライトを当てる必要があります。
 たとえばポップアップウィンドウが、画面の中央にステージのように浮かび上がり、他の要素は後ろに下がって一切操作ができなくなるということがありますね。これも一種の演出です。

 ゆっくり入ってゆっくり終わる:アニメーションではどんな物体も、動き始めはゆっくりと、そして目的地にたどり着きその動きを止める前も、然るべきスピードで描かないと不自然になります。
 あるいは、動き始めは早かったとしても、その分動きを止める前にはゆっくりにしてバランスをとることが必要です。


 

 フラッシュを使ったアニメづくり

  アニメーションがウェブでも流れるようになったのは、1987年のことです。この年、GIF(Graphic Interface Format)が開発され、主にウェブサイトの広告などに使われました。ところが、画素数が圧倒的に少なく、なんとなくカクカクした映像しか作れませんでした。

  それから、1990年にアドビ社がFlashを開発しました。Flashの最大の強みは、今まで無声だったウェブアニメに音声がつけられたことでした。このことはウェブアニメのみならず、アニメーションづくりそのものに大きな変革をもたらし、長らく様々な場面で用いられることとなりました。
  ところが、そんなFlashにはいくつもの問題がありました。
 

  1.  クローズドソース:アドビ社はFlashを販売することにばかり力を入れて、決してソースコードを公開しませんでした。それにより、Flashを修正・改良することや、後継するソフトウェアを開発することが殆ど誰にもできなかったのです。 
  2. セキュリティ:Flashはスクリプトの記述方法にきちんとした規則がありません。これにより複雑なプログラムをウェブサイトで実行することも可能になりますが、プログラムの内容次第では、ディレクトリにアクセスし、コンピューターの記録を書き換えることもできてしまうのです。
  3. パフォーマンス:ロードに時間がかかります。
  4. リソースの問題:Flashは再生にかなり多くのリソースを使用します。つまり、今お使いのシステムを長時間ストップさせたり、クラッシュさせたりする可能性があるのです。Flashを使っているサイトを開いただけでも同じことが言えます。
  5. プラグインが必要:Flashを再生するには、まずブラウザに「flashプラグイン」がインストールされていなくてはいけません。これは最低でも月に1度、あるいはそれ以上の頻度で、アップデートが必要です。

     


  WebアニメにはCSSとJavaScriptを使おう

  でも、今の時代、CSS と JavaScript というオープンソース・テクノロジーがあるではありませんか。ウェブサイトでアニメを再生することはこれで十分可能です。 

  CSSには、animation、transition、transform プロパティがあります。animation プロパティを使う時は、keyframe プロパティを細かく設定してください。transition や transform プロパティは各パーツごとに設定しましょう。

  JavaScript や jQuery には、関数 animate() や、transformation、transition プロパティが存在します。
  jQuery にはさらに沢山の関数があって、fadein(), fadeout(), slidedown(), slideup(), などはもちろんのこと、 show() , hide() 関数を使えばちょっとしたディレイをかけることもできます。

 これらはアニメを作る上で大いに役立つことでしょう。
 

  ウェブアニメで最も大切なことは、どんなブラウザでも負担なく再生できることです。

  ウェブサイトのパフォーマンスは、開発者がどのような技術を選ぶかにかかっています。

  理論上、CSS のほうが JavaScript よりも軽量なアニメーションを作ることができます。
  場所、大きさ、ローテーション、透明度 などの指定を、ほとんどのブラウザで高速に行えるという点でCSSに軍配が上がります。

  なおかつ、毎秒60フレームを守りさえすれば、アニメになるわけですし、その数値に近づけた方が機器のパフォーマンスを圧迫しません。
 そのかわり、アニメの画質に力を入れるとよいかもしれません。
 

  今や、アニメーションが使われる場面はビジネスでも、大変な広がりを見せています。
  オンラインでちょっとした説明をするとき、オンライン・ゲーム、サイト広告、双方向ポートフォリオ などさまざまです。

  あなたのビジネスにおけるアニメーションをぜひ、有意義なものにしてください。
 

 2017-06-09 23:37:30 / Hnoss
原文サイトを表示
[ 原文 ] https://opensource.com/life/16/9/basics-web-animations
Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス