Pixate勉強会で使用した資料です。

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

3. ■ Pixateって？
レイヤー（オブジェクト）に対して、
インタラクションがあった場合に、
何かしらのアニメーションをつける
Pixateでできること

4. 引用元：I Love Food https://vimeo.com/109032012

5. 引用元：http://www.pixate.com/img/demos/video-yahoo-news-digest.mp4

6. ■ サンプルのご紹介
by Yuka Namba
土に埋まっているニンジンを引っこ抜いて
収穫するゲームアプリのプロトタイプ
by Chiharu Kodama
一覧画面内の写真をタップして詳細画面に遷移し、
引っ張って閉じるインタラクションのプロトタイプ

7. ■ Pixateを始めよう！
みなさん、ご自身のパソコンでPixateを起動しながらお聞きください
簡単にPixateの使い方をご紹介

8. レイヤーの操作
インタラクションと
アニメーションの追加
レイヤーのプロパティ操作
（位置やサイズ、背景画像の指定など）
アニメーションの操作
スクリーン上でのオブジェクトの操作
■ Pixateを始めよう！
1. 画面の構成

9. プレビューモードについて
クリッピングOFF クリッピングON
クリッピングするか
どうか指定ができる
作業画面上でのプレビューモードの切替
（クリッピングのON/OFF）
レイヤーの複製
レイヤーの削除
レイヤーの追加
レイヤーの表示／非表示
2. レイヤー操作
LAYERS
INTERACTIONS
ANIMATIONS
PROPERTIES
ANIMATIONS
■ Pixateを始めよう！

10. ドラッグ＆ドロップでレイヤー（オブジェクト）に対して指定
3. インタラクション・アニメーション
LAYERS
INTERACTIONS
ANIMATIONS
PROPERTIES
ANIMATIONS
■ Pixateを始めよう！

11. どのレイヤーのどのインタラクションに紐付けるか選択
アニメーション効果のプレビューでのON/OFF
このあたりにカーソルを持って行くと、
ゴミ箱マークが表示され、削除できる
4. アニメーションの詳細設定①
LAYERS
INTERACTIONS
ANIMATIONS
PROPERTIES
ANIMATIONS
■ Pixateを始めよう！
アニメーションの紐付け
レイヤーID
指定したレイヤーに対して紐付いているインタラクションに対して
どう紐付けるか
例：指定したレイヤーにTapが紐付いていた時
例：指定したレイヤーにScrollが紐付いていた時
例：指定したレイヤーにRotationが紐付いていた時

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
■ Pixateを始めよう！
インタラクションの変化に対してアニメーションをどう連携させるか
（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
■ Pixateを始めよう！
「layer01がy軸に対して300px以上スクロールし、かつ、layer01の透明度が0.4よりも低い時」

14. Thank you !!
2015.10.10 @POLYLOGUE