クロージャ(3)cssアニメとの連携(1)概要スマートフォン用ですjQueryを利用したスマートフォン用アプリを作成して気が付いたのですが、Android4.xではjQueryのanimateの処理が非常に重く実用的でありません。そこでjQueryのanimateメソッドの代わりにcssアニメーションを利用することを学びます。cssの設定だけでは移動先を動的に変更する事ができないので、どのようにjQueryを利用していくかがポイントとなります。cssの説明だけで結構長くなってしまったため、今回はcssアニメの説明だけとなっています。jQueryとの連携は次回に説明します。スマートフォンでcssアニメが軽い理由cssアニメはスマートフォンにおいてハードウェアアクセラレーションを利用するため、jQueryのアニメよりも高速に処理できます。一部ではtransform3dでしか高速化されないといわれていますが、translateでも高速化されるそうです。追記:2014.6/29iOS6ではtransitionにもベンダープリフィックスの-webkit-が必要ということが判明したので、記事とサンプル内のソースを変更しました。解説2つのcssアニメcssアニメにはtransitionを利用するものと、animationを利用する2種類があります。スマートフォン用のコンテンツを作成する際は、両方ともベンダープリフィックスを-webkit-を付けてください。PCでサンプルを確認する場合はsafariやchoromeのようなwebkit系のブラウザで確認してください。transitionを利用したアニメ簡単な記述でアニメを作成する事ができます。要素を変形するtransformと合わせて利用することでハードウェアアクセラレーションが有効となり高速にアニメを処理できます。使用」animationを利用したアニメキーフレームを設定して複雑なアニメを作成できます。記述する要素が多いので、シンプルなアニメの場合はtransitionを利用した方がよいでしょう。アニメーション」まずはjQueryを利用せずにcssアニメを確認していきましょう。transitionを利用したアニメまずはcssアニメを利用していないサンプルを確認します。サンプル(cssAnime1/01.html)のソースを開いて、div要素が1つ有ることを確認してください。ポイントはcssの設定で以下の様に記述されているため、div要素にマウスオーバーすると幅が100pxになることです。div{width:50px;height:50px;background-color:#66CCFF;}div:hover{width:100px;}サンプルcssAnime1/01.htmlは、まだアニメを利用していないのでマウスオーバーするとすぐに幅が100pxになります。cssの設定を追加してアニメで幅が広がるようにしましょう。サンプル(cssAnime1/01b.html)のソースを開いて、div要素のcssに以下の2行が追加されていることを確認してください。div{width:50px;height:50px;background-color:#66CCFF;-webkit-transition-property:width;-webkit-transition-duration:1s;}div:hover{width:100px;}transitionでcssアニメを実現するには上記のようにアニメさせたい属性を「transition-property」で指定し、アニメの長さを「transition-duration」で指定します。他にも「transition-timing-function」と「transition-delay」が設定できるのですが、これらについては以下のサイトを参考にしてください。使用」transitionの設定は:hoverではなく、基の要素に設定することに気を付けてください。transitionアニメはjavaScriptを利用せずにリッチなUI演出を作成できるので:hoverと合わせて利用されることが多いようです。あとtransformの設定は1つにまとめて記述することが可能です。サンプル(cssAnime1/02.html)のソースを開いて、cssの設定が以下の様に変更されているのを確認してください。1s」を設定しています。各値の間はスペースです、カンマなどを入れないようにしてください。1s;}div:hover{width:100px;}サンプルcssAnime1/02.htmlでもアニメで幅が変わることが確認できます。animationを利用したアニメtransitionのアニメと同じ事をanimationを利用して実現しました。サンプル(cssAnime1/03.html)のソースを開いて、cssの設定を確認してください。transformと異なりアニメの設定は:hover側で行います。{width:100px;}}animationでcssアニメを実現するには上記のようにアニメ(キーフレーム)の名前を「animation-name」で指定し、アニメの長さを「animation-duration」で指定します。他にも色々設定できるのですが、それは以下のサイトで確認してください。アニメーション」animationではアニメさせる属性はkeyframesに設定します。サンプルでは最初「0%」と最後「100%」しか記述していませんが、中間の%も自由に設定できるため複雑なアニメが作成できるわけです。あとtransitionと同じようにアニメの設定をまとめて記述することもできます。サンプル(cssAnime1/03b.html)のソースを開いて、cssが以下の様に変更されているのを確認してください。animation属性にキーフレーム名とアニメの長さをまとめて設定しています。1s;width:100px;}animationで作成したサンプルはマウスアウトしてもアニメで元には戻りません。これはanimationがボタン等のUIに限らず汎用的なアニメ作成用に用意されているためではないかと思います(だから設定されていないマウスアウトのアニメが実行されることはない)。まとめanimationのサンプルを作成していて気が付いたのですが、macのsafariではdiv要素からマウスアウトしても幅が元に戻らないことが多くありました。私が作成しようとしているスマートフォンアプリではキーフレームが必要な複雑なアニメは使わないのでtransitionに絞っていこうと思います(次ページ)。animationの説明は今回限りですが、新しいだけあって機能が豊富です。以下のページ後半にサンプルが色々あるので確認しておくと良いでしょう。アニメーションのイベントにも対応しているので、javaScriptとの連携もできます。