デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

cssアニメとの連携(2)

概要

jQueryで値を動的に設定

前回はcssアニメの基礎を学びましたが、css設定だけでは値を動的に設定できないためゲームなどの複雑なコンテンツには利用できません(これは前回に利用を諦めたanimationでも同じです)。そこでjQueryを利用して動的にcssアニメを設定することに挑戦したいと思います。

尚、ここで紹介しているサンプルはcssアニメに対応したブラウザでないと確認できません。またcssアニメに対応したブラウザしか考慮していないためjQueryのバージョンは2.xを利用しています。

<script type="text/javascript" src="../../../css_js/jquery-2.1.1.min.js"></script>

追記:2014.6/29

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

解説

cssアニメによる要素の移動

cssアニメを覚える理由はスマートフォンアプリの作成なので、アプリで利用する要素の移動をモチーフに説明を進めていきます。まずはサンプル(cssAnime2/01.html)のソースを開いてbody内にdiv要素が1つあり、そしてcssが以下の様に設定されていることを確認してください。

要素を移動させるためにはposition属性をstatic以外に設定する必要があるので、サンプルではabsoluteを設定しました(1行目)。そして最初は上から300px、左から300pxに配置しています(3,4行目)。あとtransition-propertyで2つの要素を設定するためには8行目のようにカンマを挟んで属性を設定するようにします。

div{
	position:absolute;
	width:50px;
	height:50px;
	top:300px;
	left:300px;
	background-color:#6CF;
	-webkit-transition-property:top,left;
	-webkit-transition-duration:0.5s;
}
.anime{
	top:200px;
	left:200px;
}

今回のサンプルではマウスオーバーではなくクリックイベントで位置を移動するようにしたいので、:hoverは利用せずにanimeクラス(11〜14行)を用意しました。このクラスを設定することで上から200px、左から200pxの位置に移動するようになります。

続いてjQueryが以下の様に記述されているのを確認してください。addClassメソッドを利用してanimeクラスを追加しています。その結果、div要素をクリックするとtransitionを利用したアニメで(200,200)の位置に移動します。

$("div").click(function(){
	$("div").addClass("anime");
});

このサンプルでは前回の:hoverを意識して、animeというcssクラスを別途用意しました。しかしjQueryではcssメソッドを利用して直接cssを操作できるので、サンプル(cssAnime2/01b.html)のように記述する方がよいでしょう(下表)。

$("div").click(function(){
	$("div").css({"top":"200px","left":"200px"});
});

ここまでのサンプルは移動先は(200px,200px)と固定されていました。次はクリックした位置に移動させるように修正していきます。

クリックした位置に移動

cssメソッドは引数に変数を利用して動的に値を設定できます。なのでクリックした位置を取得して、その値をcssメソッドの引数に利用するようにします。サンプル(cssAnime2/02.html)を開いてbody内の構成とcssはcssAnime1/01b.htmlと同じ事を確認してください。

jQueryは以下の様に変更されています。クリックした位置はイベントオブジェクトから取得できるので、1行目のfunctionの引数でイベントオブジェクト(eo)を受け取っておきます。そしてpageXプロパティpageYプロパティを利用してイベントが発生した座標を取得します(2,3行目)。

$(document).click(function(eo){
	var targetX = eo.pageX + "px";
	var targetY = eo.pageY + "px";
	$("div").css({"top":targetY,"left":targetX});
});

あとは取得した値を4行目で利用すれば、クリックした位置にdiv要素が移動するようになります。実際にページ内(document)をクリックして、クリックした位置にcssアニメで移動することを確認してください。

しかしleftやtopを操作するcssアニメ(transition)ではハードウェアアクセラレーションが有効になりません。ハードウェアアクセラレーションを有効にするためにはtransitionでtransform(変形)を操作する必要があります。このページの最後にiPhoneシミュレータでtransitionだけではハードウェアアクセラレーションが有効にならないことをお見せします。

transformの利用(1)

cssのtransformは要素を変形させるプロパティで、これはtopやleftと同じようにtransitionで利用することができます。ここではtopやleftと同じように座標の移動についてのみ説明しますが、以下のサイトで他にもたくさんの変形が実現できることを確認しておいて下さい。→参考:MDN「transform

まずはcssAnime2/01.htmlと同じようにanimeクラスを利用したサンプルで確認します。
サンプル(cssAnime2/03.html)を開いてbody内の構成はcssAnime2/01.htmlと同じ事を確認してください。cssの設定は以下の様に変更されています。

今回はtopやleftでアニメさせるのではなくtransformをアニメさせるので8行目のように記述します。transformにも-webkit-が必要なので忘れないようにしましょう。

div{
	position:absolute;
	width:50px;
	height:50px;
	top:300px;
	left:300px;
	background-color:#6CF;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:0.5s;
}
.anime{
	-webkit-transform:translate(200px,200px);
}

transformでは要素を様々に変形することができますが、今回は位置を移動するだけなのでtranslateを利用します。詳細については以下のサイトを確認してください。→参考:MDN「transform / translate

サンプルでは12行目でX座標に200px、Y座標で200px移動するようにしています。ここにもベンダープリフィックスが必要なので-webkit-を忘れてはいけません。

ここで注意するのはtransformのtranslateは座標ではなく変更量を指定する点です。つまり上記のサンプルは(200,200)の位置に移動するのではなく、右に200px,下に200px移動する指定なのです。実際にdiv要素をクリックしてdiv要素が右下に移動することを確認して下さい。

移動する方向は異なりますが、サンプル(cssAnime2/01.html)とサンプル(cssAnime2/03.html)のアニメを比較してみて下さい。スマートフォンに限らず多くのPCでcssAnime2/03.htmlの方がスムースにアニメが再生されると思います。このことからtransformを利用したアニメがハードウェアアクセラレーションを利用している事が確認できると思います。

transformの利用(2)

次にcssAnime2/03.htmlを少し修正して、animeクラスを利用せずにcssメソッドを利用して直接設定するようにします。サンプル(cssAnime2/03b.html)を開いてjQueryが以下の様に変更されているのを確認してください。この様に直接cssを設定しても問題なく機能します。

$("div").click(function(){
	$(this).css("-webkit-transform","translate(200px,200px)");
});

最後にtransformで複数(translateとそれ以外)の変形を行う場合の注意点を説明しておきます。

サンプルcssAnime2/04.html)を開いてcssのanimeクラスが以下の様に設定されているのを確認してください。transformでtranslateとrotateの2つを設定しています(rotateは要素を回転させます)。

.anime{
	-webkit-transform:translate(200px,200px);
	-webkit-transform:rotate(135deg);
}

しかし、このサンプルでdiv要素をクリックすると回転はしますが移動しません。これはtransformが一度に1つの変形しか実行できないためです。そのため最初に指定したtranslate(移動)の処理がキャンセルされ、rotate(回転)しか実行されないのです。

transformで複数の変形を実行したい場合は、1つにまとめて記述する必要があります。
サンプル(cssAnime2/04b.html)を開いてcssが以下の様に変更されているのを確認してください。transformで複数の変形をまとめて設定したい場合は、このようにスペースを挟んで記述します。カンマなどは必要ないことに注意して下さい。

.anime{
	-webkit-transform:translate(200px,200px) rotate(135deg);
}

実際にdiv要素をクリックすると回転しながら移動するのが確認できます。

メモ

iPhoneシミュレータで確認

PCではハードウェアアクセラレーションが有効か確認できないので、iPhoneシミュレータでの結果を動画で確認して頂きます。iPhoneシミュレータではハードウェアアクセラレーションが有効なオブジェクトを赤く表示することができます。 →参考:casemobile様「ハードウェアアクセラレーションが効いている部分を確認する

後述の動画でiPhoneシミュレータ内に表示しているコンテンツはサンプル(cssAnime2/test01.html)と同じです。ソースを確認して上のdiv要素がtransitionだけでアニメを実行、下のdiv要素はtransformも利用してアニメを実行するようにしていることを確認して下さい。

$("#transition").on("click touchstart",function(){
	$("#transition").css({left:"200px"});
});		
$("#transform").on("click touchstart",function(){
	$("#transform").css("-webkit-transform","translate(200px,0px)");
});

以下の動画では下のdiv要素(transformを利用したもの)は移動の際に赤くなるため、ハードウェアアクセラレーションが有効になっていることを確認できます。それに対しtransitionだけの上のdiv要素は赤くなりません。

これで今回は終了です。次回はtransformを利用してクリックした位置に移動するサンプルを作成します。座標を設定することができないため、少し工夫する必要があるのです。