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

tilamicjs Javascript

昨日のtilamic.jsの使い方その２・コンストラクタのオプションに続くtilamic.jsの使い方解説です。

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

書式

.flip(imgID[,options])

第一引数の'imgID'はタイルの回転後に表示する画像を指定するIDです。これはHTMLにコーディングされている画像の並び順と'img'タグの'alt'属性によって決定されます。

<div id="tiles">
  <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>

例えばHTMLが上記のようであった場合、最初の画像は

tilamic.flip(0);

または

tilamic.flip('photo1');

という二通りの方法で指定できます。

第二引数'options'はオブジェクトの形でオプションを指定します。指定できるオプションは2つあり、'isAxisX'と'isReverse'です。
'isAxisX'はタイルが回転する軸の指定です。trueであれば回転軸がX軸となり、falseであればY軸となります。デフォルトはfalseです。
'isReverse'は回転の向きです。trueであれば回転方向が逆になります。デフォルトはfalseです。

.flip()メソッドを実行するとアクティブなタイルが一斉に回転します。タイルが「アクティブ」であるか否かは.filter()メソッドによって決まるのですが、これについては.filter()メソッドの解説の際に詳しく説明したいと思います。
初期状態ではすべてのタイルがアクティブであるため.flip()メソッドを実行すると全タイルが一斉に回転します。

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

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

以上が.flip()メソッドの解説です。
次回はタイルを順に回転させる.seqFlip()メソッドについて解説したいと思います。