アニメーション処理
2009-08-09 (日) 20:19:00 (215d)

lifebuoy.png アニメーション処理についてかんたんにまとめます。

CSSによるアニメーション 　

  • CSS3の”CSS Transitions”と”CSS Animations”を使うことで、画面上アニメーション的な動きを行うことが可能です。CSS TransitionsとCSS Animationsは、よく似た機能を提供するもので時に混同されてしまうこともあるのですが、微妙に動作が異なるために特性を活かすための用途が違ってきます。
  • 両者共にアニメーション動作を行う指定ですが、大きな違いは下記になります。
    1. 手早く単純なアニメーションを実現したい場合：CSSTransitions
    2. 細かく動作を規定し、繰り返したり、アニメーションの間もイベントを受け取ることによりJavaScriptで動作を記述したい場合：CSSAnimations

図形（グラフィックス）の描画について 　

  • ”CSS Transitions”と”CSS Animations”は、あくまで時間軸に沿って何らかの変化を起こすだけですので、実際には動かす図形を描画させる必要があります。
  • 実際のアプリケーションで派手なアニメーションを行うことは少ないでしょうから、div要素を移動させたり、透明度を高めながら消したりといった処理が中心になってくるのではないでしょうか。
  • たとえば、ページの内容を1ページずつdiv要素で包んだ上で、1ページ（個別のdiv）ずつleftを変化させればスクロールによるページめくりが実現できます。

図形描画の方法 　

CSSを使う 　

  • 普通に要素の周辺をborder指定し、background-colorも指定すれば、単純な図形が出来上がります。

CSSTransformsを使う 　

  • CSSに、CSSTransforms（-webkit-transform-*）による変形を組み合わせる。

Canvasを使う 　

  • HTML5のCanvasを使って図形描画を行うことも出来ます。

SVGを使う 　

  • Scalable Vector Graphicsを使うことでも図形描画が行えます。



スポンサード　リンク