はじめに。

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

4回目「swipejsで画像を動かして、次世代マンガを作る。」はこちら
http://qiita.com/isamua/items/291080fff9118ddfd628

timing

前回 translate と to を使って写真を動かしたりズームできるようになりました。
今回はtoでアニメーションが実行されるタイミングをtimingで変更、toの動作時間（アニメーションが実行される時間)をdurationで変更します。
また、今まではelementはimgで画像を表示させていましたが、今回はtextを使って絵文字を動かします。
早速サンプルです。

transition_animation.swipe

{
    "dimension":[600,600],
    "templates": {
        "elements": {
            "ball": { "text":"⚽️", "textAlign":"left", "x":50 }
        },
        "pages" : {
            "ball" : {
                "elements": [
                    { "text":"timing: [0.0, 0.5]", "textAlign":"left", "y":-150 },
                    { "element":"ball", "y":-100, "to":{ "translate":[200, 0], "timing":[0.0, 0.5] } },
                    { "text":"timing: [0.25, 0.75]", "textAlign":"left", "y":-50 },
                    { "element":"ball", "y":0, "to":{ "translate":[200, 0], "timing":[0.25, 0.75] } },
                    { "text":"timing: [0.5, 1.0]", "textAlign":"left", "y":50 },
                    { "element":"ball", "y":100, "to":{ "translate":[200, 0], "timing":[0.5, 1.0] } },
                    { "text":"timing: [0.0, 1.0] (default)", "textAlign":"left", "y":150 },
                    { "element":"ball", "y":200, "to":{ "translate":[200, 0] } }
                ]
            }
        }
    },
    "pages": [
        {
            "elements": [
                { "text":"animation: (default)" }
            ]
        },
        {
            "template": "ball"
        },
        {
            "elements": [
                { "text":"animation: duration 1" }
            ]
        },
        {
            "template": "ball",
            "duration": 1
        }
    ]
}

解説

今回は、elementのテンプレートとpageのテンプレートと両方のテンプレートを使います。
pageのテンプレート内で、"element":"ball"を指定してelementのテンプレートを読み込んでいます。

elementは今まではimgで画像を指定していましたが、今回は"text":"⚽️"でtextを指定しています。文字は絵文字です。"textAlign":"left"はcssなどの似たような指定で左寄せしています。

pageでは"element":"ball"を指定しているので、⚽️が表示されます。

次にtoの指定です。今回は、toにtranslateと、timingを指定しています。translateは前回でてきた指定で、x,yで指定している位置を変化させます。timingはアニメーションが実行されるタイミングの指定です。アニメーション全体の時間を1として、その時間のどのタイミングで実行されるかを配列の２つの値で指定します。

例えば、「0.0, 0.5」だと、全体の時間の前半半分の時間でアニメーションが動作します。アニメーション全体が0.5秒の場合には 0 ~ 0.25秒の間にアニメーションが動作します。「0, 1」だと、timingを指定しない場合と同じ動作をします。１つだけのアニメーションだとtimingの指定がわかりづらいので、今回は
４種類のtimingをそれぞれずらして指定しています。

    "templates": {
        "elements": {
            "ball": { "text":"⚽️", "textAlign":"left", "x":50 }
        },
        "pages" : {
            "ball" : {
                "elements": [
                    { "text":"timing: [0.0, 0.5]", "textAlign":"left", "y":-150 },
                    { "element":"ball", "y":-100, "to":{ "translate":[200, 0], "timing":[0.0, 0.5] } },
                    { "text":"timing: [0.25, 0.75]", "textAlign":"left", "y":-50 },
                    { "element":"ball", "y":0, "to":{ "translate":[200, 0], "timing":[0.25, 0.75] } },
                    { "text":"timing: [0.5, 1.0]", "textAlign":"left", "y":50 },
                    { "element":"ball", "y":100, "to":{ "translate":[200, 0], "timing":[0.5, 1.0] } },
                    { "text":"timing: [0.0, 1.0] (default)", "textAlign":"left", "y":150 },
                    { "element":"ball", "y":200, "to":{ "translate":[200, 0] } }
                ]
            }
        }
    },

上記テンプレートを使ってpageで実際に表示させます。
最初はテンプレートのページをそのまま表示させます。

        {
            "template": "ball"
        },

同じテンプレートをdurationを変更して動かします。単位は秒で、"duration": 1 と指定すると、1秒間に"to"で指定したアニメーションが実行されます。

        {
            "template": "ball",
            "duration": 1
        }

先ほどとはアニメーションの動作の時間が変わっています。

このように複数のelementをdurationとtimingで動作時間を制御することによって、複雑な動きを表現することができます。

完成したサンプルはこちら。
http://www.swipejs.net/sample5/sample1.html#0

swipeファイルはこちらです。
http://www.swipejs.net/sample5/transition_animation.swipe