Help us understand the problem. What is going on with this article?

swipejs timingでアニメーションを制御する

More than 3 years have passed since last update.

はじめに。

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

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として、その時間のどのタイミングで実行されるかを配列の2つの値で指定します。

例えば、「0.0, 0.5」だと、全体の時間の前半半分の時間でアニメーションが動作します。アニメーション全体が0.5秒の場合には 0 ~ 0.25秒の間にアニメーションが動作します。「0, 1」だと、timingを指定しない場合と同じ動作をします。1つだけのアニメーションだとtimingの指定がわかりづらいので、今回は
4種類の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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした