SVGでジャンプする雀を作った

SVGのアニメーションの検証。IEでは動かないみたい。JavaScriptでアニメーション作るのがやっぱり一番なのかな。jQueryでのアニメーションは自分でライブラリも作って、ゲームの仕事で使ったことあるので得意ですよ。

See the Pen SVG Sparrow by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.

雀は最初はCODEPENで描き始めましたがやっぱりパスの編集がつらすぎ。おとなしくBoxySVGを使って描きました。アニメーションはコードで制御するしかない。SVGにはSMILが組み込まれていて、これでアニメーションができるのですが、他にもCSSやJavaScriptでもアニメーション制御できます。とりあえずSMILの書き方でやってみました。

すごいアニメーションをCODEPENで発見

See the Pen Alex the CSS Husky by David Khourshid (@davidkpiano) on CodePen.

これ、なんとCSSだけで出来ています。これは完全に変態の域。でもIE Egdeでみると最初は問題ないですが次第に壊れていくみたい。

アニメーションはブラウザ・機種による違いがけっこうあって、厳密に同じ見え方にするのは難しい。Flash使うのがいいですよ。てか、最初のアニメーション設計にやっぱり欲しいですな。フリーで匹敵するものがあればいいのですが。

 なにかコメントをどうぞ