Pixateワークショッフ?―アフ?リケーションの概要とpixateの使い方 初級編―.pdf
- 1. Pixateワークショップ ― アプリケーションの概要とPixateの使い方 初級編 ― 2015.10.10 @POLYLOGUE
- 2. Chiharu Kodama? (chocolu.net / @chiiiiiharu?)? Designer 東京工業大学工学部卒。在学中よりデザイン事務所やWeb制作会社など でデザイナー／コーダーとしての経験を積み、卒業後は深津貴之氏率い るArt&Mobileへ入社。Webサイトの制作やモバイルアプリのUIデザイン に携わる。今年8月より独立し、プログラミングとデザインの両側面を活 かせる、UI設計、デザイン、フロントエンドの実装などを中心に活動 中。 2015.10.10 @POLYLOGUE
- 4. 引用元：I Love Food https://vimeo.com/109032012
- 6. ■ サンプルのご紹介 by Yuka Namba 土に埋まっているニンジンを引っこ抜いて 収穫するゲームアプリのプロトタイプ by Chiharu Kodama 一覧画面内の写真をタップして詳細画面に遷移し、 引っ張って閉じるインタラクションのプロトタイプ
- 12. Animates:の指定 ? Continuously to final value: ? 最終値まで継続的に変化 ? Continuously with rate: ? インタラクションの変化値に対して倍率を指定して変化 ? With duration to final value: ? 最終値までdurationを持って変化 0px 100px 50px 0.005x 0.5s 4. アニメーションの詳細設定② LAYERS INTERACTIONS ANIMATIONS PROPERTIES ANIMATIONS ■ 笔颈虫补迟别を始めよう！ インタラクションの変化に対してアニメーションをどう連携させるか （Based On:を選択後に候補が表示されます） 例：あるレイヤーに対してScrollというインタラクションを指定し、Scroll Positionと紐付けた場合
- 13. 指定したレイヤーに対して、 ? 位置（x, y / right, bottom） ? 中心位置（cx, cy） ? スケール（scale, scaleX, scaleY） ? 透明度（opacity） ? 回転（rotation, rotationX, rotationY, rotationZ） ? スクロール量（contentX, contentY） ? スクロール速度（velocityX, velocityY） の数値を指定した条件式を設定することが可能。 ここをクリックすると、各パラメータの説明が表示される これを条件式に指定 （レイヤーの名前を変更すると自動的にIDも変更される） 5. アニメーションの条件設定 ex: layer01.cy > 300 && layer01.opacity < 0.4 レイヤーID レイヤーID Y軸スクロール量 透明度 LAYERS INTERACTIONS ANIMATIONS PROPERTIES ANIMATIONS ■ 笔颈虫补迟别を始めよう！ 「layer01がy軸に対して300px以上スクロールし、かつ、layer01の透明度が0.4よりも低い時」
- 14. Thank you !! 2015.10.10 @POLYLOGUE