<<   Example 1 - CSSアニメーション >   0   1   2   

CSS3アニメーション

前ページで説明したレイヤー構造の上で、CSS3アニメーションを行います。まずは説明を簡単にするために、月を右から左へ動かす操作だけに注目します。#moonレイヤーのアニメーションです。

生のCSS3アニメーション

もともとのCSS3アニメーションは、下に示すようにCSSだけで実行できます。ところが、ここにもブラウザ依存性という問題が立ちはだかります。たったこれだけで、こんな長いソースになるのです。

#moon {
	animation: anime1 1s ease;
	-moz-animation: anime1 1s ease;
	-webkit-animation: anime1 1s;
	-o-animation: anime1 1s ease;
	-ms-animation: anime1 1s ease;
}
@keyframes anime1 {
	0%		{ left: 70%; }
	100%	{ left: 10%; }
}
@-moz-keyframes anime1 {
	0%		{ left: 70%; }
	100%	{ left: 10%; }
}
@-webkit-keyframes anime1 {
	0%		{ left: 70%; }
	100%	{ left: 10%; }
}
@-o-keyframes anime1 {
	0%		{ left: 70%; }
	100%	{ left: 10%; }
}
@-ms-keyframes anime1 {
	0%		{ left: 70%; }
	100%	{ left: 10%; }
}

CSS3の規格は、現在2013年8月のW3C勧告候補が最新であり、正式なW3C勧告は出ていません。つまり、最終案はまだありません。そのため、各ブラウザの対応状況も自ずから違います。その違いをできるだけ吸収しようとして、ベンダーブレフィックスが導入されました。以下に示すCSSソースにおいて、「-webkit」や「-moz」などがベンダープレフィックスです。ところが、これ自体が問題で、正式版(プレフィックスの無い表現)、Firefox用、Webkit用、オペラ用、IE用と5種類の表記を併記しなければならず、たいへん冗長です。ブラウザの最新版についてだけなら、正式版とWebkit用だけですみますが、ユーザのブラウザが最新版だけであると期待することはできません。

本当に面倒です。そこでjQueryの登場です。

jQueryの利用

ご存知のように、jQueryは、JavaScriptの記述を簡便にしてくれるライブラリです。当初は、Ajaxを補助するために使うのが主であったようですが、現在ではそれにとどまらず、HTML5関連技術の導入に欠かせないものになっています。その中でも、ブラウザ依存性を吸収してくれる働きは、本当に助かります。jQueryのおかげで動的Webサイトの生産性は2倍以上になったと言っても過言ではないでしょう。

このような機能を持つJavaScriptライブラリは、他にも、Prototype、MooToolsなどがありますが、最近の調査によると、jQueryの市場シェアが93%とデファクトスタンダードになっています。一長一短はありますが、やはりデファクトスタンダードを利用するメリットは大きいと思います。

4・5年前のデファクトスタンダードは、Prototypeでしたが、そのシェアは現在5%弱です。ITの移り変わりの激しさを表しています。最近の注目はModernizrです。この1年間の新規導入サイト数はjQueryを超えています。

jQueryを導入すると、上記の27行分のCSSソースは、次のたった2行のJavaScriptソースで置き換えることができます。

$('#moon').css('left','70%');
$('#moon').animate({left: '0%'},1000,'easeOutQuint');

jQueryの導入による不利益は、あらかじめjquery.jsをサーバにダンロードしておいて、ページからリンクする手間だけです。下記のようなコードをHTMLソースに加えます。

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>

1行目は通常のjQueryライブラリです。ところで、上記のJavaScriptソースの2行目、animate関数の第3引数はeasingと呼ばれるものです。easingは、アニメーションの変化の様子を表す名前ですが、通常のjQueryライブラリだけでは、面白みの無い簡単な変化しか使えません。ここでは、’easeOutQuint’というeasingを使っていますが、これは最初に大きく変化して、最後はゆっくりになる変化です。ブレーキをかけて止まるイメージです。このような多様な変化を扱うライブラリが、jQueryUIと呼ばれるライブラリです。

jQueryUIには、easingだけではなく、その他様々な付加機能がパッケージされています。

CDNの利用

ところで、上記のように、jQueryをダウンロードしてサーバから配布する手段もありますが、多くのサイトではフリーのCDNサイトを利用しています。なかでも、GoogleのCDNを利用するのがお勧めです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

jQueryライブラリは結構サイズが大きいので、一見、世の中のサイトが全てCDNのjQueryを使用すると、ネットワーク負荷がたいへんなことになると思われますが、事実は逆です。皆がデファクトスタンダードのJavaScriptライブラリを利用して、デファクトスタンダードのCDNサイトを利用することになれば、必ずブラウザキャシュやプロキシのキャッシュにヒットしますから、実際にはダウンロードは最初の1回だけです。たとえ、ネットサーフィンを行なっても、最初の1回だけですみます。

CSS3アニメーションの種類

CSS3アニメーションは、CSS属性を変化させるものですから、様々な可能性があります。その中でも、代表的なものは次の3種類でしょう。

  • 位置の移動
  • サイズの変化
  • 透明度の変化

位置の移動

これについては、既に上でソースを示していますが、比較のために別の簡単な例を提示します。リストの関数は、下にあげたスライダーのようなボタンをクリックした時のハンドラです。CSSのleftプロパティを操作して、ボタンを右方向に移動しています。対応するCSSなどは省略しますが、このページのソースを見てもらえば分かります。

4行目と5行目のanimate()関数は結合されています。animete()関数の戻り値はjQueryのオブジェクトであるため、animate()関数を結合することができます。この場合デフォルトでは、前のanimate()処理が終わった後に、後のanimate()処理が実行されます。

animate()関数の第4引数は、アニメーション動作が終了した時に実行される関数オブジェクトです。無効にしたボタンを有効に戻しています。

jQueryでは、ノードの属性はattr()関数で変更・取得し、CSSプロパティの変更・取得はcss()関数を使って行います。

function onClick1(id) {
	var sid = '#' + id;
	$(sid).attr('disabled',true);
	$(sid).animate({left:'90%'},1000,'easeOutQuint')
		.animate({left:0},1000,'easeInQuint',function(){
			$(sid).attr('disabled',false);
		});
}

サイズの変化

以下の例では、ボタンを横方向に拡大します。CSSのwidthプロパティを操作していることだけが、上記と異なります。

function onClick2(id) {
	var sid = '#' + id;
	$(sid).attr('disabled',true);
	$(sid).animate({width:'100%'},1000,'easeOutQuint')
		.animate({width:'10%'},1000,'easeInQuint',function(){
			$(sid).attr('disabled',false);
		});
}
</script>

透明度の変化

以下の例は、透明度を変更してボタンを消しています。CSSのopacityプロパティを操作しています。opacityは不透明度とでも読めばよいプロパティです。0の時、完全に透明になり、1の時(default値)、完全に不透明になります。

function onClick3(id) {
	var sid = '#' + id;
	$(sid).attr('disabled',true);
	$(sid).animate({opacity:0},1000,'easeOutQuint')
		.animate({opacity:1},1000,'easeInQuint',function(){
			$(sid).attr('disabled',false);
		});
}
</script>

easing

jQueryUIで付加されたeasingによる変化の様子を以下に示します。横軸が経過時間、縦軸が当該変数の変化量です。上に上げた例では、left、width、opacityの変化量(値そのものではなく、始値からの変化量)が縦軸に相当します。

上で使用している’easeOutQuint’は、最初に変化速度が大きく急激に減速するもの、’easeInQuint’は、急激に加速する変化であることが分かります。ちなみに、’Quint(ic)’は5(次)という意味です。jquery-uiの内部で5次関数を使っていることが想像できます。

easingのグラフをクリックしてください。

linear
linear
swing
swing
easeInQuad
easeInQuad
easeOutQuad
easeOutQuad
easeInOutQuad
easeInOutQuad
easeInCubic
easeInCubic
easeOutCubic
easeOutCubic
easeInOutCubic
easeInOutCubic
easeInQuart
easeInQuart
easeOutQuart
easeOutQuart
easeInOutQuart
easeInOutQuart
easeInQuint
easeInQuint
easeOutQuint
easeOutQuint
easeInOutQuint
easeInOutQuint
easeInExpo
easeInExpo
easeOutExpo
easeOutExpo
easeInOutExpo
easeInOutExpo
easeInSine
easeInSine
easeOutSine
easeOutSine
easeInOutSine
easeInOutSine
easeInCirc
easeInCirc
easeOutCirc
easeOutCirc
easeInOutCirc
easeInOutCirc
easeInElastic
easeInElastic
easeOutElastic
easeOutElastic
easeInOutElastic
easeInOutElastic
easeInBack
easeInBack
easeOutBack
easeOutBack
easeInOutBack
easeInOutBack
easeInBounce
easeInBounce
easeOutBounce
easeOutBounce
easeInOutBounce
easeInOutBounce

Example 1-1

YozoraのプログラムからCSS3アニメーションの部分だけを抜き出したのが、Example 1-1です。分かりやすいように、CSSとJavaScriptを1個のHTMLファイルに納めてありますので、ソースを見てください。位置、サイズ、透明度のアニメーションを全て使用しています。左上のボタンをクリックすると、アニメーションを繰り返します。

この例では、アニメーションのタイミングをずらせるために、以下のように、setTimeout()関数を使っています。

setTimeout(function() {
	$('#moon').animate({left:'9.2%'},700,'easeOutQuint');
},500);

上の例は、500ミリ秒待ってから関数を実行するという意味です。同じオブジェクトで実行する場合は、animate()関数をシリアルに接続することもできますが、異なったオブジェクトを操作する場合は、setTimeout()を使わざるを得ません(タイミングが分かりにくいのが欠点です)。