jQuery入門講座使い方-cssアニメとの連携(1)

cssアニメとの連携(1)

概要

スマートフォン用です

jQueryを利用したスマートフォン用アプリを作成して気が付いたのですが、Android4.xではjQueryのanimateの処理が非常に重く実用的でありません。そこでjQueryのanimateメソッドの代わりにcssアニメーションを利用することを学びます。cssの設定だけでは移動先を動的に変更する事ができないので、どのようにjQueryを利用していくかがポイントとなります。

cssの説明だけで結構長くなってしまったため、今回はcssアニメの説明だけとなっています。jQueryとの連携は次回に説明します。

スマートフォンでcssアニメが軽い理由: cssアニメはスマートフォンにおいてハードウェアアクセラレーションを利用するため、jQueryのアニメよりも高速に処理できます。一部ではtransform3dでしか高速化されないといわれていますが、translateでも高速化されるそうです。
→参考：casemobile様「ハードウェアアクセラレーションが効いている部分を確認する」

追記：2014.6/29

iOS6ではtransitionにもベンダープリフィックスの-webkit-が必要ということが判明したので、記事とサンプル内のソースを変更しました。

解説

2つのcssアニメ

cssアニメにはtransitionを利用するものと、animationを利用する2種類があります。スマートフォン用のコンテンツを作成する際は、両方ともベンダープリフィックスを-webkit-を付けてください。
PCでサンプルを確認する場合はsafariやchoromeのようなwebkit系のブラウザで確認してください。

transitionを利用したアニメ: 簡単な記述でアニメを作成する事ができます。要素を変形するtransformと合わせて利用することでハードウェアアクセラレーションが有効となり高速にアニメを処理できます。
→参考：MDN「CSS transition の使用」

animationを利用したアニメ: キーフレームを設定して複雑なアニメを作成できます。記述する要素が多いので、シンプルなアニメの場合はtransitionを利用した方がよいでしょう。→参考：MDN「CSS アニメーション」

まずは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」が設定できるのですが、これらについては以下のサイトを参考にしてください。
→参考：MDN「CSS transition の使用」

transitionの設定は:hoverではなく、基の要素に設定することに気を付けてください。transitionアニメはjavaScriptを利用せずにリッチなUI演出を作成できるので:hoverと合わせて利用されることが多いようです。

あとtransformの設定は1つにまとめて記述することが可能です。サンプル（cssAnime1/02.html）のソースを開いて、cssの設定が以下の様に変更されているのを確認してください。transition属性の値として「width 1s」を設定しています。各値の間はスペースです、カンマなどを入れないようにしてください。

div{
	width:50px;
	height:50px;
	background-color:#66CCFF;
	-webkit-transition:width 1s;
}
div:hover{
	width:100px;
}

サンプルcssAnime1/02.htmlでもアニメで幅が変わることが確認できます。

animationを利用したアニメ

transitionのアニメと同じ事をanimationを利用して実現しました。サンプル（cssAnime1/03.html）のソースを開いて、cssの設定を確認してください。transformと異なりアニメの設定は:hover側で行います。

div{
	width:50px;
	height:50px;
	background-color:#66CCFF;
}
div:hover{
	-webkit-animation-name:btn;
	-webkit-animation-duration:1s;
	width:100px;
}
@-webkit-keyframes btn {
	0% {width:50px;}
	100% {width:100px;}
}

animationでcssアニメを実現するには上記のようにアニメ（キーフレーム）の名前を「animation-name」で指定し、アニメの長さを「animation-duration」で指定します。他にも色々設定できるのですが、それは以下のサイトで確認してください。→参考：MDN「CSS アニメーション」

animationではアニメさせる属性はkeyframesに設定します。サンプルでは最初「0%」と最後「100%」しか記述していませんが、中間の%も自由に設定できるため複雑なアニメが作成できるわけです。

あとtransitionと同じようにアニメの設定をまとめて記述することもできます。サンプル（cssAnime1/03b.html）のソースを開いて、cssが以下の様に変更されているのを確認してください。animation属性にキーフレーム名とアニメの長さをまとめて設定しています。

div:hover{
	-webkit-animation:btn 1s;
	width:100px;
}

animationで作成したサンプルはマウスアウトしてもアニメで元には戻りません。これはanimationがボタン等のUIに限らず汎用的なアニメ作成用に用意されているためではないかと思います（だから設定されていないマウスアウトのアニメが実行されることはない）。

まとめ

animationのサンプルを作成していて気が付いたのですが、macのsafariではdiv要素からマウスアウトしても幅が元に戻らないことが多くありました。とりあえず私が作成しようとしているスマートフォンアプリではキーフレームが必要な複雑なアニメは使わないのでtransitionに絞っていこうと思います（次ページ）。

animationの説明は今回限りですが、新しいだけあって機能が豊富です。以下のページ後半にサンプルが色々あるので確認しておくと良いでしょう。アニメーションのイベントにも対応しているので、javaScriptとの連携もできます。→参考：MDN「CSS アニメーション」

次のページ：cssアニメとの連携(2)