swipejsで画像を動かして、次世代マンガを作る。contentswipejsで画像を動かして、次世代マンガを作る。update.はじめに。Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。画像を組み合わせたマンガ、動画、svgで書かれたvectorなどを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。Engine、swipejsを使う」はこちら。scaleで画像を動かしたり大きさを変えるtranslate画像(や他のelement)の表示位置を変更します。位置に画像が表示されます。scale画像(や他のelement)の表示される大きさを変えます。大きさで表示されます。opacity透明度です。0で透明、1で完全に不透明になります。to画像(や他のelement)を、iOS版ではswipe操作時に、js版ではクリック時に変化させます。translateを指定すれば場所を移動、scaleを指定すれば表示される大きさ、opacityの場合には透明度が変化します。今回は、photoのtemplateのelemetの大きさを200x200(表示領域の1/3の大きさ)に指定、位置は0x0です。クリックごとに位置を移動させるので、transitionをdefaultのscrollではなくreplaceを指定しました。}最初は、そのままの大きさ、場所に表示させます。},toにtranslateを指定します。これでクリック後(swipe後)に最初の位置から[100,200]に画像が移動します。},element直下とtoの両方にtranslateを追加します。この指定をすると最初に[100,200]に表示され、クリック後(swipe後)にtoの[100,100]に移動します。両方のtranslateがある場合も、いずれもx,yで指定した位置からtranslateだけ変化します。[100,100](toのtranslate)の位置になるので、注意してください。},toで移動して、最初位置に戻しつつ、scaleで大きさを2倍にして表示します。scaleで大きさを変えるときは、まずはtranslateで場所を移動させて(今回のケースでは[0,0]なので、実際には変化なく[0,0]の位置に移動)、その場所で上下左右に拡大します。今回は上下に100ずつ画像がはみ出しています。},先程の位置、大きさから移動させつつ、scaleを1に指定して大きさを戻します。},画像のサイズを3倍にして、画面全体に表示させます。分だけ移動させると、右下方向に拡大され、画面全体に表示されます。},最後は、opacityを0にして画像を消します。}注意するのは、2点。1つはscaleとtranslateの関係でscaleはその場で上下左右に拡大すること。1点はtoと、translateの関係で、translateは常にx,yで指定した位置に対して変化するので、elementに指定して、toにも指定する場合に気をつけてください。scaleの使い方を解説しました。今までの内容を応用するとswipeのサイトにあるマンガの表現が可能になります。こちらのソースも参考にしてください。upLoginユーザーは見つかりませんでした。