2014/06/24

【jQuery】スマホやタブレットでのなめらかなアニメーション演出の基本

【jQuery】スマホやタブレットでのなめらかなアニメーション演出の基本

スマホやタブレットでスライドショーを始めとするアニメーションを実装する際,cssでpositionの指定や,animate()を使用したりすると,カクつきが発生し,思い通りの動きにならない場合があります.

そこで,今回はcssのtransformプロパティtransitionプロパティを利用した,アニメーション設定の基本を紹介したいと思います.

筆者の環境はGoogle Chromeを使用しています.動作不良の場合はブラウザを変更してみてください.

目次

transform

transformプロパティは要素のボックスに対して2次元・3次元方向への移動,拡大・縮小,回転などの変形を行えます.
変形は以下の様な関数を指定します.

効果関数指定する値
移動 translate() 距離を実数値+単位(例 120px)
拡大・縮小 scale() 倍率を実数値(例 5)
回転 rotate() 角度をdeg,rad,grad
傾斜 skewX(),skewY() 角度をdeg,rad,grad

※変形の起点は,ボックスの中点になります.変更する場合はtransform-originプロパティに値を設定してください

/* 変形の起点を左上に指定した例 */
#Sample {
  transform-origin : left top;
}

transition

tansitionは,スタイルを別のスタイルへ変化させる効果になります.

transition-property

transitionプロパティは,効果を適用するプロパティを指定します.

指定方法範囲
none 変化するプロパティなし
all すべてのプロパティに適用
プロパティ名 指定したプロパティに適用.複数の場合はカンマで区切る.
/* プロパティ名を指定した例 */
#Sample {
  transition-property : background-color;
}

transition-duration

transition-durationプロパティは,変化にかかる時間を秒またはミリ秒で指定します.

/* 変化に係る時間を3秒に設定する例 */
#Sample {
  transition-duration : 3s;
}

サンプル

以上の基本的事項を踏まえて,jQueryのanimate()を使用した場合と,css()を使用してtransformとtransitionを設定した場合のサンプルを用意しました.

// animateボタンクリック
$("#animate_button").click(function() {
    $("#animate").animate({
	"left" : "200px",
    }, 500);
});

//transitionボタンクリック
$("#transition_button").click(function() {
    $("#transition").css({
	// 移動後x座標の指定
	"transform" : "translate(200px)",
	// かかる時間
	"transition-duration" : "500ms"
    });
});

まとめ

スマートフォンやタブレットでは,上記のようにtransformプロパティとtransitionプロパティを組み合わせてアニメーションすることで,なめらかなアニメーションを演出することが出来ます.

ベンダープレフィックスが必要な場合があるので,使用する際には注意してください.