「pixate」制作で悩む３つのところ。

こんにちは！
アメーバブログでデザインを担当している、中隆理(ナカタカミチ)と申します。
先日、1pixelでpixateの紹介や操作方法を説明させていただきました。

今回は、「Ameba古着屋を作ろう！」という名目で行ったハンズオン社内勉強会での内容から、pixate制作で悩みそうなところを抜き出して紹介します。
なので、Ameba古着屋をダウンロードして実際に見ていただくか、pixateで制作したサンプルがあるので、pixateアプリのQRリーダーから読み取っていただくと、内容が把握しやすいと思います！

今回の内容

1. スクロールさせる
2. スクロールとアニメーションを組み合わせる
3. コンディション（if文）を使う
pixateの制作で、クセがあり、つまづくポイントになりそうという理由でこれら3つについて解説します！

制作の基本

pixateは、どんなインタラクションによって、どんなアニメーションが起こるのかを設定して制作していきます。

例えば、画像Aをタップしたら、画像Bを拡大させたいときには、

① 画像Aに「TAP」というインタラクションを設定
② 画像Bに「scale」というアニメーションを設定
③「scale」の条件設定で画像Aをタップしたらどれだけ拡大するかを設定

このように制作していきます。

ちなみにインタラクション/アニメーションは以下を設定できます。

インタラクション
Drag, Tap, Double Tap, Long Press, Rotate, Pinch, Scroll

アニメーション
Move, Scale, Rotate, Fade, Color, Image, Reorder(レイヤーの上下入れ替えができる)

1. スクロールさせる

pixateのインタラクションは、基本的にはインタラクションをさせたいレイヤーに設定すれば良いのですが、スクロールは違います。
Ameba古着屋のトップページの縦スクロールを用いて紹介します。

① 画像を表示したい領域を四角形で作る

・赤い四角形を「area_scroll_01」という名前で配置
（わかりやすいように赤くしているだけなので、プロパティの「Appearance」から色なしを選択）
・端末全体に表示したいので、四角形のサイズは画面と同じ

② スクロールさせたい画像を配置

・画像アセットページから画像をドラッグ＆ドロップ
・四角形レイヤーと左上のポジションを合わせる

③ 四角形レイヤーを親としてグループ化

・レイヤー部分で、画像レイヤーを親となる四角形レイヤーにドラッグ&ドロップ

④ 親の四角形にインタラクションの「scroll」を設定

・インタラクションのパネルからドラッグ&ドロップ
・さらに今回はスクロールするたびに画面にフィットしてほしいので、アニメーション設定から「paging」を選択

これで完成です。
Ameba古着屋には他に3つのページがあるので、それぞれ同じようにスクロールを設定してあげましょう！

・レイヤー構造はこのようになっているはず

ちなみに、
親レイヤーよりも子レイヤーが、縦に長い時は、縦にスクロールし、横に長い時は、横にスクロールします。
ただし縦も横も親レイヤーより大きくなるとぐにょぐにょ動いてしまいます。

Ameba古着屋の横にスクロールするとページが切り替わる部分も上記と同様に制作できます。

① 各ページを準備し、ページ順に横に並べる

② area_flickという四角形レイヤーを画面と同じサイズで作る

・四角形レーヤーは赤い部分

③ 四角形レイヤーを親、各ページを子としてグループにする

④area_flickに「scroll」を設定

2. スクロールとアニメーションを組み合わせる

画面右上のインジケーターを、選択しているページと連動させます。
制作する上で、この様に考えるとわかりやすいかもしれません。

① インジケータの画像を配置する
・白い4つの点が並んだ画像と赤い選択しているページを示す画像の2枚を配置

② 赤い点のレイヤーにアニメーションの「move」を設定

③「move」のアニメーション条件設定を行う

・Based On部分では、どのレイヤーのどのインタラクションに対応させるかを指定
・area_flickは4つのページをまとめている「scroll」が設定されている親レイヤーのこと

Animatesの部分は3つ選択肢があり、私はこのように解釈しています。最初のうちはどれを選べばいいのか迷うと思います。

・Move toの部分の272という数字は、インジケーターのふたつ目の白い丸のx軸方向の位置を意味している
・赤い点の画像はx座標が258で配置されており、1ページ目→2ページ目にスクロールされる間に258→272へとx座標の変化を指定している

・条件設定下部の「＋target」をクリックすると条件が追加できる
・ area_flickのスクロール量は今回はページにフィットするので、0，320，640，960の時しかなく、以下のようになる
※今回の画面は320×568で制作
0＝1ページ目
320＝2ページ目
640＝3ページ目
960＝4ページ目

3-1. コンディション（if文）を使う

次は選択したページのタイトルを表示させます。こちらも先ほどと同じように、area_flickのスクロール量が0，320，640，960のときにタイトルそれぞれの不透明度を0or100に変更しています。

①4つのタイトルを配置し、それぞれにアニメーションから「fade（不透明度を変更できる）」を設定

②トップページ以外の3つ画像を不透明度0（opacity＝0）にする

③「fade」の条件設定を行う

まずは最初に表示している画像に条件を設定していきます。if文を記入するので「With duration to final value」を選択します。

・if文はルールがしっかりしているので、意外と難しくない
・書き方は固定で、
（数値を測りたいレイヤーの名前）.（測定する値）　不等号　（指定する数値）
ここでは「area_flick.contentX == 0」と記入する
・ contentX とは x軸方向のスクロール量のことで、「area_flickのx軸方向のスクロール量が0のとき」を指している

・条件を更に追加し、スクロール量が0ではない時は不透明度が0になるように指定

if文で測定できる値の種類

・測定できる値はこのようにたくさんあり、この中から適切なものを選択する

if文で使える不等号の種類

・詳しくはpixateのユーザーガイドに書いてある

3-2. コンディション（if文）を使い、タブを表現

下側にスクロールするときだけ、タブが下に移動するようにif文を記入します。基本的には、アニメーションから「move」を選択して、スクロールの開始や終了を起点として移動させているだけなので、割愛します。

このように記入します。

意味は以下になります。

・velocityYはy軸方向の向きを測る事ができる

このようにしてタブの動きは表現できます。このようなスクロールに連動させる動きはよく使うことがあると思います。だいたいこんな感じの式なので、定番の式なんだ！くらいに思っておいてください！

最後に

今回は作り方を僕の方で勝手に決めていましたが、同じ見た目でもいろいろやり方があるので、どうしたらそう表現できるかを考えてみてください。

そして、とっつきにくい部分しか紹介していないので、全部が難しいわけではないです。やってみたら案外すぐ理解できる人も多いと思いますし、僕は結構楽しくて時間を忘れてやってしまいました。

最後まで読んでいただき、ありがとうございます！