Blog株式会社ガラパゴスのメンバーによる技術ブログです。プロトタイプこんにちは。UIデザイナーのまあのんです。本格的な冬到来でちょっぴり風邪気味です。ずびProtoPie動かしてみたレポート第二回目になります。一回目の記事はこちら↓gtech.hatenablog.com前回はsketchで作成したデザインをProtopieにinportしましたね。スクロール可能な範囲をまるっとグループ化(⌘G)してレイヤー最下層に。画面に固定表示したいレイヤーは上にしておきましょう。固定で見せたいステータスバーとタブバーを残して他はグループ化。Containerを選択するとグループの上に表示されます。Containerは、レイヤーパネルからコンテナ内にレイヤーを配置するとコンテナのスクロールやページングが可能になります。プロパティパネルでスクロール方向やオーバースクロールした時のリアクションが設定できます。Containerを選択してもあくまでレイヤーパネルに追加されただけです。Containerにひゅっと移動させることを忘れずに!(これよくわからず地味に苦戦してました、、)レイヤー名の階層が変わり、グループが左上の正方形にマスクされたら成功です。Containerを選択した状態で、マスクされてる範囲をデバイスサイズに合わせましょう。レイヤーサイズではないので気をつけて。それでは、Previewを見てみましょう第一段階成功です!!!作ってる側はこれだけで謎の感動があったりしますStep3.イメージをタップして遷移する次にこの動きをProtopieのできる範囲で再現していきます。複雑なインタラクションなので、まずは対象のトリガーとそれに対するレスポンスを整理してみましょう。このレスポンスをさらに分解して一つずつ動作を追加していきます。それではProtopieで実際に動きをつけてみましょう。レイヤーパネルからタップする対象のレイヤーを選択します。Triggerを選択して、Tapを選択してください。Tapの下に➕が現れましたね。➕はトリガーに対するレスポンスを選択できます。3虹の画像エリアを画面上部に動かすため、レイヤーで虹画像を選択しながら➕ではmoveを選択します。右のインスペクターパネルではその時の大きさの変化量などを定義することができます。今回はパーツを画面最上部に配置したいので、move項目のXYの値を調節していきます。アニメーションのタイミングやイージングなどもここで細かく設定できます。位置はこんな感じかな。レスポンスの選択は直感的で簡単にできますね。これをうまく組み合わせていけば複雑なインタラクションも難なくできます!この要領で他のレスポンスも追加していきます。いったところで今日はここまで!次回で完成までもってきます!宣言!12月21日更新予定です。企画、21日の記事になります。キミに決めた!(たぶん)第1回はじめまして。Cloud9をさわってみるご機嫌よう、ガラパゴスのおとめです。DevBlog株式会社ガラパゴスのメンバーによるブログです。(1)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。