はじめに。
Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvectorなどを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。
１回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7
２回目「swipejsで画像のスライドショーを作成する」はこちら
http://qiita.com/isamua/items/5021c750b6e8383c82a6
３回目「swipejsのスライドショーでページめくりを変えて遊ぶ」はこちら
http://qiita.com/isamua/items/37cb69a1bd2eaa549d3f
translate, scale, to, scaleで画像を動かしたり大きさを変える
translate
画像(や他のelement)の表示位置を変更します。
例えば、x= 10, y = 20 のときに、translate = [50, 60]を指定すると、 x = 10 + 50 = 60, y = 20 + 60 = 80 となり、x = 60, y = 80 の位置に画像が表示されます。
scale
画像(や他のelement)の表示される大きさを変えます。
たとば、w = 100, h = 200の場合にscaleを3と指定すると、w, hそれぞれ3倍になり w = 300, h = 600となります。
scaleを[0.5, 0,2]と指定すると、 w = 100 * 0.5 = 50, h = 200 * 0.2 = 40 と、w = 50, h = 40 の大きさで表示されます。
opacity
透明度です。0で透明、1で完全に不透明になります。
to
画像(や他のelement)を、iOS版ではswipe操作時に、js版ではクリック時に変化させます。
translateを指定すれば場所を移動、scaleを指定すれば表示される大きさ、opacityの場合には透明度が変化します。
#サンプルと解説
{
"dimension":[600,600],
"templates": {
"pages": {
"photo": {
"elements":[
{ "h":200, "x":0, "img":"./1.jpg", "w":200, "y":0, "id": "1" }
],
"transition" : "replace"
}
}
},
"title":"photo gallery",
"pages":[
{
"template":"photo",
"elements":[ {"id":"1"} ]
},
{
"template":"photo",
"elements":[ {"id":"1", "to" : { "translate":[100,200] }} ]
},
{
"template":"photo",
"elements":[{"id":"1", "translate":[100,200], "to": { "translate":[100,100] }} ]
},
{
"template":"photo",
"elements":[{"id":"1", "translate":[100,100], "to": {"translate":[0,0], "scale": 2.0 }} ]
},
{
"template":"photo",
"elements":[{"id":"1", "scale": 2.0 , "to": {"translate":[100,100], "scale": 1.0 }} ]
},
{
"template":"photo",
"elements":[{"id":"1", "translate":[100,100], "to": {"translate":[200,200], "scale": 3.0 } } ]
},
{
"template":"photo",
"elements":[{"id":"1", "translate":[200,200], scale: 3.0, "to": {"opacity": 0}} ]
}
],
"type":"net.swipe.swipe"
}
解説
今回は、photoのtemplateのelemetの大きさを200x200（表示領域の1/3の大きさ）に指定、位置は0x0です。また、クリックごとに位置を移動させるので、transitionをdefaultのscrollではなくreplaceを指定しました。
"photo": {
"elements":[
{ "h":200, "x":0, "img":"./1.jpg", "w":200, "y":0, "id": "1" }
],
"transition" : "replace"
}
最初は、そのままの大きさ、場所に表示させます。
{
"template":"photo",
"elements":[ {"id":"1"} ]
},
toにtranslateを指定します。これでクリック後(swipe後）に最初の位置から[100,200]に画像が移動します。
{
"template":"photo",
"elements":[ {"id":"1", "to" : { "translate":[100,200] }} ]
},
element直下とtoの両方にtranslateを追加します。この指定をすると最初に[100,200]に表示され、クリック後(swipe後）にtoの[100,100]に移動します。両方のtranslateがある場合も、いずれもx,yで指定した位置からtranslateだけ変化します。
to後の位置が「0,0」(x, yの指定) + 「100,200」 (element直下のtranslate) + [100,100](toのtranslate）ではなく、「0, 0」(x, yの指定) + [100,100](toのtranslate）の位置になるので、注意してください。
{
"template":"photo",
"elements":[{"id":"1", "translate":[100,200], "to": { "translate":[100,100] }} ]
},
toで移動して、最初位置に戻しつつ、scaleで大きさを２倍にして表示します。scaleで大きさを変えるときは、まずはtranslateで場所を移動させて（今回のケースでは[0,0]なので、実際には変化なく[0,0]の位置に移動)、その場所で上下左右に拡大します。なので、今回は上下に100ずつ画像がはみ出しています。
{
"template":"photo",
"elements":[{"id":"1", "translate":[100,100], "to": {"translate":[0,0], "scale": 2.0 }} ]
},
先程の位置、大きさから移動させつつ、scaleを1に指定して大きさを戻します。
{
"template":"photo",
"elements":[{"id":"1", "scale": 2.0 , "to": {"translate":[100,100], "scale": 1.0 }} ]
},
画像のサイズを３倍にして、画面全体に表示させます。scaleはその場で拡大するので、(3(倍) - 1 ) / 2 分だけ移動させると、右下方向に拡大され、画面全体に表示されます。
{
"template":"photo",
"elements":[{"id":"1", "translate":[100,100], "to": {"translate":[200,200], "scale": 3.0 } } ]
},
最後は、opacityを0にして画像を消します。
{
"template":"photo",
"elements":[{"id":"1", "translate":[200,200], "scale": 3.0, "to": {"opacity": 0}} ]
}
注意するのは、２点。１つはscaleとtranslateの関係でscaleはその場で上下左右に拡大すること。もう１点はtoと、translateの関係で、translateは常にx,yで指定した位置に対して変化するので、elementに指定して、toにも指定する場合に気をつけてください。
#まとめ
translate, scale, to, scaleの使い方を解説しました。今までの内容を応用するとswipeのサイトにあるマンガの表現が可能になります。こちらのソースも参考にしてください。