はじめに。
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を使って絵文字を動かします。
早速サンプルです。
{
"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