HTMLのアニメーションいろいろ - ゆうなんとかさんの雑記帳的な。

@kyubuns 今回ネタ(HTML系のなにか)が見つかったからLT枠やってみたいんだよねー
— ゆうなんとか@ねむいさん (@yuu_hara) 10月 1, 2012

ということでネタというのはタイトル通りです。4つほどあるのですがここは雑記帳。超さくっと総ざらいしてみます。

1. CSS3 Animation/Transition

なんか後述する他のに比べると負荷が軽いという噂があります。IEでの対応状況が散々なのが悩みの種です。

Animation

@keyframes piyo {
    0% { hogehoge }
    100% { fugafuga }
}

といった感じキーフレームを書いて、

div#animation {
    animation: piyo 1s ease 0s;
}

みたいな感じで使います。キーフレームの数値設定とeasing関数の設定が肝です。CSS Transformと組み合わせるとかなり派手に動かせるので、うまくすればJavaScriptをわざわざ書いていたのをCSSに書き換えることが出来るようになるかもしれません。
実例↓

Transition

#hoge { transition: color 1s; }
#hoge:hover { color:#ffff00; }

みたいな感じで使います。こちらはちょっとしたいわゆるYet Another感、Web2.0感を出すために使う感じでAnimationと住み分けできそうです。
実例はありません。ごめんなさい。

2.HTMLのエレメントを直に触って動かす

ライブラリを使わないでやるとものすごくめんどいです。昨日一昨日紹介したTweenJSはHTMLのエレメントを動かすのも使えます。また、enchant.jsもこの方式だった気がします。
実例↓

3.Canvasを使う

まさにHTML5の分野で今注目をあびる優れたやつです。どちらかと言うとアニメーションさせる向きのものではないようなので、こちらもライブラリを使ったほうがはかどります。WebGLが使える環境だと3Dグラフィックを書くこともできます。こちらはThree.jsというライブラリがあるようですが当分触りません。
実例↓

4.SVGアニメーション
いまいち注目を浴びてない気がするけれど結構使えるブラウザは多い気がします。アニメーションしなくても、ベクターグラフィックはうまく使うと画像サイズを減らせますし、レスポンシブルデザインが流行る昨今では拡大縮小に強いという強みが生きてきます。
実例⇢

スクロールはCSSアニメーションです。SVGアニメーションは菱形の間を結ぶ線です。

あとは小ネタを仕込みつつ、自己紹介すれば5分は持ちそうです。っていうかむしろ欲張り過ぎて足りない感が…