ywork2020.com

Title

要素のアニメーションを実行する

目次 (INDEX)

animateとは

ここで説明する animate とは次の語句からなるjQueryのメソッドです。
animate
読み: アニメート
意味: アニメーション

目次に戻る

animateメソッドの概要

このメソッドは、CSS アニメーションを実行します。 アニメーションの処理はキューに追加され、その順序通りに実行されていきます。

引数に与えたCSSプロパティの名前と値、指定時間とアニメーションの加減速の値を元に、 あたかも CSS の animation プロパティを操作しているかのように要素のアニメーションを行います。

また、引数にオプションを設定することで、アニメーションのバラエティーを増やすことができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(Selector).animate(CSSProperty [, duration] [, easing] [, function]);
$(Selector).animate(CSSProperty, options);

目次に戻る

サンプルコードと実行結果 .animate(CSSProperty , duration , easing)

ここでは、基本構文から .animate(CSSProperty , duration , easing) を使ってサンプルを作成してみました。

サンプルは、div要素を2つ使ってスイッチを作っています。

このスイッチをクリックすることで、ONとOFFを視覚的に切り替えるようにアニメーションさせます。

サンプルコード: CSS
<style>
	#idOuter{
		border: medium solid ##pink;
		border-radius: 22px;
		width: 200px;
	}
	#idSwich{
		color: ##red;
		background-color: ##lightpink;
		border-radius: 20px;
		box-shadow: 0 0 8px currentColor;
		opacity: 0.5;
		width: 100px;
		text-align: center;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idOuter">
		<div id="idSwich">OFF</div>
	</div>
</body>
  • 06: div (id="idOuter" はスイッチの外枠を表します。)
  • 07: div (id="idSwich" はスイッチを表します。)
サンプルコード: script
<script>
	let duration = 100;
	let easing = "swing";
	$("#idSwich").click(function(){
		if($(this).text() == "OFF"){
			$(this).animate({"margin-left":"50%", "opacity":"1"}, duration, easing).text("ON");
		}
		else{
			$(this).animate({"margin-left":"0", "opacity":"0.5"}, duration, easing).text("OFF");
		}
	});
</script>
  • 02: duration (変数です。アニメーション開始から終了までに掛かる時間をミリ秒で指定しています。)
  • 03: easing (変数です。アニメーションの加速と減速に関わるキーワードです。主に"swing"や"linear"を指定します。)
  • 04-11: click(function(){処理}) (関数を呼び出します。クリックすると実行される処理を表します。)
  • 05-10: if(条件判定処理){真処理}else{偽処理}(条件分岐処理です。条件判定処理がtrueを返せば真処理を実行し、falseを返せば偽処理を実行します。)
  • 06, 09: animate() (CSSアニメーションを実行します。CSSのプロパティと値はオブジェクト型で指定して下さい。)
  • 06, 09: text() (テキストを変更します。)
実行結果:
OFF

目次に戻る

サンプルコードと実行結果 .animate(CSSProperty, options)

ここでは、基本構文から .animate(CSSProperty, options) を使ってサンプルを作成してみました。 options は オブジェクトで指定していますので前のセクションとはコードの書き方が違います。

サンプルは、前セクションと同じく、div要素を2つ使ってスイッチを作っています。

このスイッチをクリックすることで、ONとOFFを視覚的に切り替えるようにアニメーションさせます。

サンプルコード: CSS
<style>
	#idOuter{
		border: medium solid ##lightskyblue;
		border-radius: 22px;
		width: 200px;
	}
	#idSwich{
		color: ##blue;
		background-color: ##lightblue;
		border-radius: 20px;
		box-shadow: 0 0 8px currentColor;
		opacity: 0.5;
		width: 100px;
		text-align: center;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idOuter">
		<div id="idSwich">OFF</div>
	</div>
</body>
  • 06: div (id="idOuter" はスイッチの外枠を表します。)
  • 07: div (id="idSwich" はスイッチを表します。)
サンプルコード: script
<script>
	let objOption = new Object();
	objOption.duration = 300;
	objOption.specialEasing = {"margin-left":"swing", "opacity":"linear"};
	objOption.complete = function(){
		if($(this).text() !== "OFF"){
			$(this).css({"color":"##white"});
		}
		else{
			$(this).css({"color":"##blue"});
		}
	}
	$("#idSwich").click(function(){
		if($(this).text() == "OFF"){
			$(this).animate({"margin-left" : "50%", "opacity" : "1"}, objOption).text("ON");
		}
		else{
			$(this).animate({"margin-left" : "0", "opacity" : "0.5"}, objOption).text("OFF");
		}
	});
</script>
  • 02: objOption = new Object() (objOption というオブジェクトを新規作成しています。)
  • 03: objOption.duration (02行目のオブジェクトに duration というプロパティを作成して、値を 300 に設定しています。)
  • 04: objOption.specialEasing (02行目のオブジェクトに specialEasing というプロパティを作成して、各CSSプロパティ毎に easing 値を設定しています。)
  • 05-12: objOption.complete = function(){処理}) (02行目のオブジェクトに complete という関数を処理を設定しています。)
  • 13-20: click(function(){処理}) (関数を呼び出します。クリックすると実行される処理を表します。)
  • 14-19: if(条件判定処理){真処理}else{偽処理}(条件分岐処理です。条件判定処理がtrueを返せば真処理を実行し、falseを返せば偽処理を実行します。)
  • 15, 18: animate() (CSSアニメーションを実行します。CSSのプロパティと値はオブジェクト型で指定して下さい。)
  • 15, 18: text() (テキストを変更します。)
実行結果:
OFF

目次に戻る

構文の options について

前のセクションでサンプルを示していますが、構文の options は オブジェクト、またはオブジェクト型で指定します。 以下にオブジェクトのプロパティをリストとして記載します。

  • always:
    アニメーションの終了した時に実行される関数を指定します。
  • complete:
    アニメーションの完了時に実行される関数を指定します。
  • done:
    アニメーションが正常終了した時に実行される関数を指定します。
  • duration:
    アニメーション周期の開始から終了までの時間をミリ秒単位で指定します。
  • easing:
    アニメーションの加速タイプをキーワードで指定します。
  • fail:
    アニメーションが異常終了した時 (stop 等) に実行される関数を指定します。
  • progress:
    アニメーション周期の期間中に継続して実行される関数を指定します。
  • queue:
    アニメーションをキューに追加するか否かを true か false で指定します。
  • specialEasing:
    CSSプロパティ毎に固有の easing を設定します。
  • start:
    アニメーションの開始時に実行実行される関数を指定します。
  • step:
    アニメーション周期の期間中に変化していくプロパティ値を元にして実行されるコールバック関数を指定します。
    step = function(now, fx){}

目次に戻る