More Related Content
Similar to Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf (20)
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
- 2. Chiharu Kodama
(chocolu.net / @chiiiiiharu )
Designer
東京工業大学工学部卒。在学中よりデザイン事務所やWeb制作会社など
でデザイナー/コーダーとしての経験を積み、卒業後は深津貴之氏率い
るArt&Mobileへ入社。Webサイトの制作やモバイルアプリのUIデザイン
に携わる。今年8月より独立し、プログラミングとデザインの両側面を活
かせる、UI設計、デザイン、フロントエンドの実装などを中心に活動
中。
2015.10.10 @POLYLOGUE
- 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
■ 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よりも低い時」