LoginSignup
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-11-14

はじめに。

Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvectorなどを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。

1回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7

2回目「swipejsで画像のスライドショーを作成する」はこちら
http://qiita.com/isamua/items/5021c750b6e8383c82a6

3回目「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で大きさを2倍にして表示します。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 }} ]
        },

画像のサイズを3倍にして、画面全体に表示させます。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}} ]
        }

注意するのは、2点。1つはscaleとtranslateの関係でscaleはその場で上下左右に拡大すること。もう1点はtoと、translateの関係で、translateは常にx,yで指定した位置に対して変化するので、elementに指定して、toにも指定する場合に気をつけてください。

まとめ

translate, scale, to, scaleの使い方を解説しました。今までの内容を応用するとswipeのサイトにあるマンガの表現が可能になります。こちらのソースも参考にしてください。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8