フロントエンド開発Blog

オレには鈍器がある

CSS3 , Velocity.js , animation , transfrom

最近、CSS3アニメーションをJSから制御してヌルヌル動く見た目的にも派手なサイトが増えてきたような気がしますね。

一昔前のフルFlashサイトみたいで個人的には使いにくいなーと思ってみてるんですが、まぁとりあえず勉強してみようと思ったのがそもそもの始まりです。勉強中のトピックでもあるので、記事内容に不正確な点がある可能性があります・・あらかじめご了承ください。m(_ _)m 随時訂正してブラシアップしていけたらな、と。

数あるアニメーションライブラリでjqueryとの親和性が高く、閲覧環境毎の最適化がされている(ないし実装側で制御しやすい)ものを、と考えたら候補はGSAPとVelocity.js二択になりました。

更に言うと自分はCLOSEDなサイトを手がけることが多々あるためMITライセンスが良い、ということでVelocity.jsを触ってみました。

結論からいうと・・・

IE10以上で、スマートフォンやタブレットの比重が重く、3Dアニメーションが不要ならカジュアルに使えると思いました。

そもそもの話ですが、CSSアニメーションはIE10からサポートされ、IE9以下は従来通りJavaScriptアニメーションとして処理されます(jQuery.animateと同等の処理)。そのためVelocity.jsを通じたCSS3アニメーション制御による「パフォーマンスの良さと柔軟な制御の両立」といううま味が片手落ちになってしまいます。

can i use - CSS animation

プログレッシブ・エンハンスメントの考え方でIE9以下は簡素なアニメーションのみとする、のような切り分けができるのであれば有用ですが。。あまり国内の仕事でプログレッシブ・エンハンスメント!って聞かないのが現状です。プロモーションに力を入れている企業や製品のキャンペーンサイトとかならあり得るでしょうけど、正直自分の周りでは聞かない。プログレッシブ・エンハンスメント自体、あまり浸透した考え方じゃないのかな。

Velocity.jsを使った例をjsdo.itに載っけてみた

※不具合が出たコードに★付けてみました。

Velocity.js Transformテスト

青箱のモーションでios上で意図しない動作になりました。処理としては「2回転(rotateY:"720deg")しつつz軸に200px移動(translateZ: 200)その際、オブジェクトの中心座標軸(transform-origin)もz軸移動に合わせて移動」というイメージです。

transform-originを動的に割り当てないとどうなるかというと、rotateYの軸が移動開始地点(transform-origin:50% 50% 0;)のままなので実際のオブジェクトの中心座標とずれが生じます。すると箱が「何コレ、ウィルオウィスプ?」みたいな画面上を駆け回るような動きになります。

progressコールバック内でtransform-originを動的に再割り当てしてPCのchromeで見たら意図したとおりに動きました。ですがiphoneのsafari, chromeで見ると青箱がその場で回転するだけで、拡大(正確にはZ軸手前移動)しませんでした。

「translateZだけ」「transform-originだけ」のアニメーションなら不都合無く動きました。どうやらtransform-originとtranslateZを併用したときのみ、こういう現象が起こるようです。何か書き方が悪いのだろうか・・・orz この例みたいにただ単にオブジェクトを大きく見せたいだけならscaleをアニメーションさせれば良さそうですね。

Velocity.js thenとcomplete

IE11とiphoneで確認したところ、thenがエラーが起きました。公式のデモも同様のエラーが出てきました。thenの使用を控えた方がいいのかなーなんて思っちゃいました。

ざっと触ってみた所感と、自分的に上手くできなかった点を列挙してみました。まだVelocity.js自体、リリースされて間もないということもあってこれから!って感じがします。追々、実際の案件にも使ってみたいなー

ページトップへ

関連ページ

ページトップへ