swipejsで画像を動かして、次世代マンガを作る。

# はじめに。
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の場合には透明度が変化します。



#サンプルと解説

```json
{
    "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を指定しました。

```json
            "photo": {
                "elements":[
                    { "h":200, "x":0, "img":"./1.jpg", "w":200, "y":0, "id": "1" }
                ],
                "transition" : "replace"
            }
```

最初は、そのままの大きさ、場所に表示させます。

```json
        {
            "template":"photo",
            "elements":[ {"id":"1"} ]
        },
```

toにtranslateを指定します。これでクリック後(swipe後）に最初の位置から[100,200]に画像が移動します。

```json
        {
            "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）の位置になるので、注意してください。

```json
        {
            "template":"photo",
            "elements":[{"id":"1", "translate":[100,200],  "to": { "translate":[100,100] }} ]
        },
```

toで移動して、最初位置に戻しつつ、scaleで大きさを２倍にして表示します。scaleで大きさを変えるときは、まずはtranslateで場所を移動させて（今回のケースでは[0,0]なので、実際には変化なく[0,0]の位置に移動)、その場所で上下左右に拡大します。なので、今回は上下に100ずつ画像がはみ出しています。

```json
        {
            "template":"photo",
            "elements":[{"id":"1",  "translate":[100,100],  "to": {"translate":[0,0], "scale": 2.0 }} ]
        },
```

先程の位置、大きさから移動させつつ、scaleを1に指定して大きさを戻します。

```json
        {
            "template":"photo",
            "elements":[{"id":"1", "scale": 2.0 , "to": {"translate":[100,100], "scale": 1.0 }} ]
        },
```

画像のサイズを３倍にして、画面全体に表示させます。scaleはその場で拡大するので、(3(倍) - 1 ) / 2 分だけ移動させると、右下方向に拡大され、画面全体に表示されます。

```json
        {
            "template":"photo",
            "elements":[{"id":"1", "translate":[100,100], "to": {"translate":[200,200], "scale": 3.0 } } ]
        },
```

最後は、opacityを0にして画像を消します。

```json
        {
            "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のサイトにあるマンガの表現が可能になります。こちらのソースも参考にしてください。

http://www.swipe.net/sample/player.html#0

ソース
http://www.swipe.net/sample/hirano.swipe