講師Leah Hanがお届けする、ProtoPieの新しいヒントです！これは2回構成の前編で、基本的なループアニメーションを扱います。後編では、無限ページスクロールについてお話しします。
まずは一番簡単なものから始めましょう！
回転ループ
レイヤーを回転し続ける方法を試してみましょう。
レイヤーに「Start」トリガーと「Rotate」レスポンスを追加して、自動的に回転を開始させます。
次に回転角度として360を入力すると、時計回りに1周します。
止まらずに回転し続けるには、プロパティパネル下部の「Repeat」オプションにチェックを入れます。
最後に、「Easing」のカーブを設定し、繰り返しごとの間隔時間を変更します。
この例では、間隔なしのLinearカーブで設定しました。
回転ループの設定
すごいですよね？ でもまだあります！
以下のように、設定によって回転ループアニメーションはさまざまな印象を与えます。
3種類の回転ループアニメーション
どれが一番良いと思いますか？ 正解はなく、完全に好みによります。回転ループを作るには、「Rotate」レスポンスを1つ追加するだけでよいことを覚えておいてください。
次のループに進みましょう！
移動ループ
回転と同様に、まず「Start」トリガーと「Move」レスポンスを追加します。
次に、レイヤーがどこまで移動してから戻るかを決めます。「move to」を選ぶと、レイヤーを正確な位置（x=200）へ移動させたいことを意味します。また、「move by」を選ぶと、レイヤーの現在位置を知る必要はなく、右方向へ200の距離だけ前進させればよい、という意味になります。
距離200のmove by
もう一度「Repeat」オプションにチェックを入れ、「Easing」カーブを設定します。
（この例では「move by」+200を使用しました。）
Repeatオプションを確認
なぜ戻ってこないのでしょうか？ それは「move back」の効果を追加していないからです。（当たり前のように思えますが、簡単なことに意外と惑わされることがあります。）
そのため、まだいくつか行う必要があります：
同じレイヤーにもう1つ「Move」レスポンスを追加します。
左側へ距離200で戻るように、「move by」-200に位置を設定します。
「Repeat」にチェックを入れる前に、「Start delay」の設定を忘れないでください。というのも、「move back」はレイヤーが右側に移動した後に起こるべきだからです。
Move backレスポンスの設定
Radiusループ、Scaleループ、Opacityループでも、2つのレスポンスを使う必要があります。1つは状態を変えるため、もう1つは状態を元に戻すためです。Moveループと同じです。
次回のProtoPie Tipsとループアニメーションの後編では、以下のような無限ページスクロールの作り方を学びます。
無限ページスクロール
他にも取り上げてほしいヒントがあれば、返信でぜひお知らせください。
