こんにちは、みなさん！ProtoPie講師のLeahです。Looping Animationsの第2回をお届けします。
先週は基本的なLooping Animationsを扱いました。今回は、無限ページングスクロールの作り方をお教えします。でもその前に…
無限ページングスクロールとは？
無限ページングスクロールとは、下のデモのように、ページを両方向に何度もスライドできることです。
そのロジックはどうなっているの？
この場合、3つのページを使い、ページングコンテナでグループ化しました。
これはProtoPieのとても基本的な機能です。まだページングコンテナを作ったことがないなら、こちらの
が役に立つはずです。
もう作り方は知っていると思うので、次のステップに進みましょう。
3番目のページを左にスライドすると、その後ろに続くページが必要になります。そこで、ページ1をページ1'として複製し、ページ3の後ろに置きます。
ページ1'が画面の中央までスクロールしたら、その瞬間に4つのページすべてを元の位置に戻し、もう一度ページ1が画面に表示されるようにします。すぐに戻してしまえば（duration=0）、見た目上はページ1とまったく同じなので、ユーザーは4番目のページ（ページ1'）の存在に気づけません。
スクロールが元に戻る
次は、ページを右から左へスクロールさせる方法を学びましょう。まず、前と同じように1番目のページの左側にページが必要なので、ページ3をページ3'として複製し、ページ1の左側に置きます。次に、その5つのページをページ1からスクロールし始めるようにします。やり方がわからない場合は、中央のページからページングを開始する方法を確認してください。
前と同じように、ページ3'が画面の中央に移動したら、すぐにページをページ3まで戻して、右から左へのスライドを続けられるようにします。
スクロールとページングの完了例
ProtoPieでこのインタラクションを作るには？
これを実現するには、‘Range’トリガーと‘Scroll’レスポンスを使う必要があります。
ページ1'が画面の中央までスクロールするとき、距離（scroll offset）は750です。‘Range’トリガーを使えば、scroll offsetを749.5～750.5の間に設定し、‘Scroll’レスポンス（＝各ページの幅）でページを187.5にスクロールできます。
ページ3'が画面の中央までスクロールするとき、距離（scroll offset）は0です。‘Range’トリガーを使えば、scroll offsetを-1～1の間に設定し、‘Scroll’レスポンス（＝各ページの幅）でページを562.5にスクロールできます。
注意: なぜ片方は±0.5の範囲にして、もう片方は±1なのか？ まあ…数値が大きすぎない限り、両方とも同じ数値の±に設定しても効果は同じです。
このヒントは、そんなに簡単ではありませんよね？ もっと詳しく見たい方は、このPieファイルをダウンロードしてください。
他にも取り上げてほしいヒントがあれば、返信でぜひお知らせください。
