tilamic.jsの使い方その６・'.setOrigin()'メソッド

tilamicjs Javascript

今回も引き続きtilamic.jsの解説記事です。

この記事では前回解説した'.filter()'メソッドと並んでtilamic.jsの鍵である'.setOrigin()'メソッドについて解説します。
この記事の内容はtilamic.js Method-setoriginとほぼ同じです。

'.setOrigin()'メソッドはアクティブなタイルの'transform-origin'プロパティをまとめて設定するメソッドです。
前回解説した'.filter()'メソッドが「どのタイルを回転させるか決定するメソッドだったのに対し、'.setOrigin()'メソッドは「どこを中心に回転させるか」を決定します。
'.flip()'メソッドや'.seqFlip()'メソッドのオプションに'isAxisX'というものがありこれは回転の軸を決定するオプションであると説明しましたが、今回説明する「回転の中心」はそれとは異なる概念です。
'isAxisX'は単に回転の軸が縦か横かを指定するものであるのに対し、'.setOrigin()'は「その回転軸がエリア上のどこにあるか」を指定するものであると考えることができます。
数学的に説明すると'.setOrigin()'メソッドによって指定される点を「原点」としてX軸とY軸を描いたものが'isAxisX'で指定できる回転軸となります。

書式

.setOrigin(keyword)

このメソッドは引数を一つだけ取りその方は文字列型です。
引数としてとれる文字列は次の4種類に限られます。

'each': タイルの回転の中心をそのタイルの中心に設定する
'centerOfAll': タイルの回転の中心をエリアの中心に設定する
'centerOfRow': タイルの回転の中心をそのタイルが属している行の中心に設定する
'middleOfCol': タイルの回転の中心をそのタイルが属している列の中心に設定する

Tilamicオブジェクトが作成された直後は'each'の状態になっています。

動作デモ
(動作の様子はこちらでご覧いただけます。)

<div id="tiles" style="width: 60%;" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		var imgID = 1;
		var isAxisX = false;
		var originType = ['each', 'centerOfAll', 'centerOfRow', 'middleOfCol'];
		setInterval(function(){
			tilamic.setOrigin(originType[imgID % 4]).flip(imgID % 4, {
				'isAxisX': isAxisX
			});
			isAxisX = !isAxisX;
			imgID++;
		}, 2000);
	});
</script>

'.setOrigin()'メソッドはタイルの回転の中心を変更した「新たなTilamnicオブジェクト」を作成しているのであり、呼び出し元のオブジェクトを変更しているのではありません。