update.はじめに。Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。画像を組み合わせたマンガ、動画、svgで書かれたvectorなどを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。Engine、swipejsを使う」はこちら。http://qiita.com/isamua/items/5d40558fbed7f90b34e72回目「swipejsで画像のスライドショーを作成する」はこちらhttp://qiita.com/isamua/items/5021c750b6e8383c82a63回目「swipejsのスライドショーでページめくりを変えて遊ぶ」はこちらhttp://qiita.com/isamua/items/37cb69a1bd2eaa549d3f4回目「swipejsで画像を動かして、次世代マンガを作る。使って写真を動かしたりズームできるようになりました。今回はtoでアニメーションが実行されるタイミングをtimingで変更、toの動作時間(アニメーションが実行される時間)をdurationで変更します。今まではelementはimgで画像を表示させていましたが、今回はtextを使って絵文字を動かします。今回は、elementのテンプレートとpageのテンプレートと両方のテンプレートを使います。pageのテンプレート内で、"element":"ball"を指定してelementのテンプレートを読み込んでいます。elementは今まではimgで画像を指定していましたが、今回は"text":"⚽️"でtextを指定しています。"textAlign":"left"はcssなどの似たような指定で左寄せしています。pageでは"element":"ball"を指定しているので、⚽️が表示されます。今回は、toにtranslateと、timingを指定しています。translateは前回でてきた指定で、x,yで指定している位置を変化させます。timingはアニメーションが実行されるタイミングの指定です。アニメーション全体の時間を1として、その時間のどのタイミングで実行されるかを配列の2つの値で指定します。0.5」だと、全体の時間の前半半分の時間でアニメーションが動作します。0.25秒の間にアニメーションが動作します。1」だと、timingを指定しない場合と同じ動作をします。1つだけのアニメーションだとtimingの指定がわかりづらいので、今回は4種類のtimingをそれぞれずらして指定しています。},上記テンプレートを使ってpageで実際に表示させます。最初はテンプレートのページをそのまま表示させます。},同じテンプレートをdurationを変更して動かします。指定すると、1秒間に"to"で指定したアニメーションが実行されます。}先ほどとはアニメーションの動作の時間が変わっています。このように複数のelementをdurationとtimingで動作時間を制御することによって、複雑な動きを表現することができます。完成したサンプルはこちら。http://www.swipejs.net/sample5/sample1.html#0swipeファイルはこちらです。upLoginユーザーは見つかりませんでした。