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

前回のtilamic.jsの使い方その３・'.flip()'メソッドに続きtilamic.jsのメソッドについての解説です。

この記事ではタイルを順に回転させるメソッドである.seqFlip()について解説します。
この記事の内容はtilamic.js Method-seqflipとほぼ同じです。

書式

.seqFlip(imgID[,options] )

第一引数の'imgID'はタイルの回転後の画像を指定するIDです。これについては前回解説した.flip()メソッドの'imgID'と全く同じなのでそちらをご覧ください。

第二引数の'options'はオブジェクトの形でオプションを指定します。指定できるオプションは4つあり、'delay'、'isZtoA'、'isAxisX'、'isReverse'です。

'delay'はあるタイルが回転してから次のタイルが回転するまでの時間です。単位は'ms'です。デフォルトは100です。

'isZtoA'はタイルが回転する順序で、trueを指定するとタイルが回転する順序が逆になります。右下のタイルから左上へ向かって順に回転するということです。デフォルトはfalseです。

'isAxisX'はタイルの回転軸の指定です。このオプションは前回解説した.flip()メソッドの同名オプションと同じです。

'isReverse'はタイルの回転方向です。これも前回解説した.flip()メソッドの同名オプションと同じです。

.seqFlip()メソッドを実行するとアクティブなタイルが順番に回転します。タイルが「アクティブ」であるか否かは.filter()メソッドによって決まるのですが、これについては.filter()メソッドの解説の際に詳しく説明したいと思います。タイルは基本的には左上から右下へ向かって順に回転します。オプションで'isZtoA'がtrueであれば逆順に回転します。

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

<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 isZtoA = false;
		var imgID = 1;
		setInterval(function(){
			tilamic.seqFlip(imgID % 4, {
				'isZtoA': isZtoA
			});
			imgID++;
			isZtoA = !isZtoA;
		}, 3000);
	});
</script>