Contenu connexe Similaire à amana tech night vol.2 『実践!Pixate』 (20) amana tech night vol.2 『実践!Pixate』3. amana tech night #2 // 実践! Pixate
いま話している人について
吉竹 遼
@ryo_pan
2011 年〜 2014 年 10 月までフェンリル株式会社で受託開発に従事。
2014 年 10 月から Standard Inc に参画。
4. amana tech night #2 // 実践! Pixate
これまでの活動
http://yo-ry.hateblo.jp/entry/2014/02/13/204727
5. amana tech night #2 // 実践! Pixate
これまでの活動
http://www.slideshare.net/ryoyos/origami-32856872
6. amana tech night #2 // 実践! Pixate
これまでの活動
http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
7. amana tech night #2 // 実践! Pixate
これまでの活動
http://www.slideshare.net/ryoyos/creative-insights-01-42453782
8. amana tech night #2 // 実践! Pixate
これまでの活動
http://www.slideshare.net/ryoyos/ui-crunch-03
9. amana tech night #2 // 実践! Pixate
事前準備
• Pixate の登録
http://www.pixate.com/
• ビューワーアプリのインストール
iPhone / Android
• アセットの DL・解凍
https://www.dropbox.com/s/cfxkodl35ep4vcm/assets.zip?dl=0
ワークショップの時とはファイル構成が微妙に違うので、
当日参加された方も DL をお願いします
10. amana tech night #2 // 実践! Pixate
おおざっぱな流れ
• プロジェクトの新規作成
• アセットの読み込み
• アセットの配置
• 動きをつける
• さらに動きをつけてみる
30. amana tech night #2 // 実践! Pixate
04
このあたりからビューワーアプリを起動しておくと、リアルタイムで更新されていくのが見れて楽しいです
画面をスクロールさせてみる
49. amana tech night #2 // 実践! Pixate
何をしたのか?
Move アニメーションはレイヤーを動かすアニメーション。素のままだと
ドラッグで動かせるだけなので『どのタイミングで』『どう動かすか』
という条件を追加した。具体的には
■ Based On(タイミングの基準)
thumb レイヤーが / ドラッグリリースされた時に
■ Move to(どう動かすか)
Left 70pt / Top 84pt に動かす
といった感じ。
52. もう 1 つ Move アニメーションを追加して、
■ Based on
main / ScrollPosition
■ Animates
Continuously with rate
■ Move
Top / -1
にする
56. 再度 Scale を thumb.png に適用して
■ Based On
thumb / Drag Release
■ Scale
0x
にする
デフォルトの Scale も0x にする
58. ①
3 つ目の Scale を thumb.png に適用
して
■ Based On
thumb / Drag Position
■ Animates
With duration to final value
にする
②
Zip に入っていた『conditions.txt』
を開き、01 の文字列をペーストする
Scale は0.5x に設定する
③
画面下部にある『+CONDITION』をクリックする
59. 新しく ELSE IF という項目が追加され
るので『conditions.txt』の 02 の文
字列をペーストする
Scale は 1.5x に設定する
61. amana tech night #2 // 実践! Pixate
何をしたのか?
conditions.txt に書かれているのは、ちょっとした条件の記述(いわゆる
if 文というやつです)。ざっくり解説すると
・レイヤー(ここでは thumb)の
・横の中心位置が
・250pt よりも
・大きく
・加えて、
・thumb レイヤーの縦の中心位置が 520pt よりも大きければ
thumb.cx > 250 && thumb.cy > 520
62. amana tech night #2 // 実践! Pixate
250pt
520pt
前ページに書いた条件
に当てはまるエリアで
のみ、サイズを小さく
した。
63. amana tech night #2 // 実践! Pixate
条件でできることは限られているため、
慣れるのに時間はかかりません。
詳しく知りたい方は↓を読んでみてください。
http://help.pixate.com/knowledgebase/articles/462989-11-conditions
67. 2 つ目の Scale アニメーションを適用し、
■ Based on
thumb / Drag Release
■ Animates
With duration to final value
に設定する
『conditions.txt』の 01 をペーストする
■ Scale
1x / 基点を右下に変える
■ Easing Curve
spring
■ Friction / Tension
10 /300
に設定する
69. amana tech night #2 // 実践! Pixate
12
サムネイルの処理を詰める
これを適用することで、サムネイルを離した時にカートに吸い込まれたように見えます
70. thumb.png に Fade アニメーションを
追加し、
■ Based on
thumb / Drag Release
■ Animates
With duration to final value
に設定する
『conditions.txt』の 01 をペーストする
■ Fade to
0%
■ Duration
0s
に設定する
71. amana tech night #2 // 実践! Pixate
ex 1
highlighted を再現する
どこをタップしたのかが分かるようになります
72. ①
main レイヤー内に新規レイヤーを
作成する(ここでは highlighted
に名前を変更)
■ Position
Left : 4pt / Top : 4pt
■ Size
Width : 312pt / Height : 209pt
■ Appearance 内 Color
ffffff
■ Opacity
0%
に設定する
②
Fade アニメーションを 2 つ追加し、
1 つ目を
■ Based on
thumb / Drag Start
■ Fade to
50%
2 つ目は
■ Based on
thumb / Drag Release
■ Fade to
0%
に設定する
75. ■ Based on
thumb / Drag Release
に設定する
■ Ordering
Place Behind / btn_cart_01.png
■ Delay
1.5 seconds
に設定する
『conditions.txt』の 01 をペーストする
80. amana tech night #2 // 実践! Pixate
Pixate でできること ( ざっくり )
レイヤーに
レイヤーを
レイヤーの
を付加して
させる
x の位置 / x の中心位置 / y の位置 / y の中心位置 / 右位置 / 下位置
スケール / x のスケール / y のスケール / 透明度 / 回転 / x の回転
y の回転 / z の回転 / y のスクロール速度 / x のスクロール速度
y のスクロール量 / x のスクロール量
に変化があった場合
ドラッグ / タップ / ダブルタップ / 長押し
回転 / ピンチ / スクロール
移動 / スケール / 回転 / 透明度 / 色の切り替え
画像の切り替え / 階層切り替え
81. amana tech night #2 // 実践! Pixate
Pixate を使ってみての雑感
• できることに限りがあるのがいい
• iPhone でも Android でも見れるのがいい
• Origami や Framerjs よりも覚えるのが簡単
82. amana tech night #2 // 実践! Pixate
まとめ
• 作ったプロトタイプをどう使うかが大切
• 実際に触ってできることできないことを知ろう
• あまり手法に振り回されすぎないように!
83. amana tech night #2 // 実践! Pixate
参考リンク
公式ヘルプ (5,6,10,10a,10b,11 は特に必読 )
公式チュートリアル
公式デモ
Prototyping and Design with Lyft & Pixate
http://help.pixate.com/knowledgebase/articles/461798-1-introduction
http://www.pixate.com/education/video-tutorials/
http://www.pixate.com/education/demos/
https://www.youtube.com/watch?v=X-jDSOHsix8