STUDIOのアニメーション設定にはループさせる機能がありませんが、2023年1月に追加されたカルーセルの自動再生機能を応用することで、一定速度で要素が無限ループするデザインを実装することができます。
この記事ではSTUDIOで無限ループを実装する方法と注意点について解説していきます。なお、Google Tag Managerを使う必要はなく、STUDIOのデザインエディタで完結する方法です。
また、この記事をご覧の方の中には「カルーセルではなくてもいいから、要素をゆっくりスライドさせるデザインを実装したい」という方もいらっしゃると思います。
そういった方に向けて、カルーセルを使わずに「ループ風のデザイン」を実装する代替手段についても紹介します。
実装の手順
1．カルーセルを追加する 2．写真を任意のサイズに調整する ３．イージングを直線にする ４．再生間隔を「100」に設定する 逆方向にループさせる方法：親ボックスを180度回転させて、写真をさらに180度回転させる スマホで表示したときにループが一瞬止まる挙動を示すことがある 注意点：画面上に同時に表示できるアイテム数は最大7件 上方向や下方向へのループも実現可能ではあるものの、扱いが非常に煩雑になる 代替手段：長時間再生のアニメーションを応用することで、ループ風のデザインを実装できる イージング：cubic-bezier(0 , 0 , 0.85, 1 ) 時間：任意の値（通常時より非常に大きな数値） 移動：任意の値（非常に大きな値） 写真が順番に切り替わるスライドショーの実装手順 まとめ
今回は写真をゆっくりとループさせるデザインを例に解説していきます。写真をロゴに置き換えれば、よく見かける企業ロゴがループしているデザインを実装することもできます。
実装の手順
1．カルーセルを追加する
ボックスパネルのなかにある「Carousel」を追加します。今回はテキストやボタンは必要ないため、それらは削除し写真だけを残します。
2．写真を任意のサイズに調整する
つぎに写真のサイズを調整します。アイテムボックスにはマージンはつけずに完全に密接した状態で配置し、写真と写真の間の余白はパディングで表現することをおすすめします。
アイテムボックスにマージンをつけるとループが途中で止まったり、カクつく現象が起こりやすいようです。
３．イージングを直線にする
アイテムボックスの「モーション > イージング」の設定を直線にします。これにより、写真の動きが緩急をつけたものではなく、一定の速度になります。
４．再生間隔を「100」に設定する
カルーセルの設定を「自動再生：ON」、「再生間隔：100」、「送り時間：プレビューで確認しながら任意の値を設定（大きい値にしてゆっくり動かす方が自然になります）」、「ホバーで停止：ループを止められるようにする必要がなければOFF」にします。
再生間隔を「100」よりも小さい値にすると、挙動が不安定になりますのでご注意ください。
これで設定は完了です。プレビュー環境で動きを確認し、必要に応じて送り時間の調整などを行います。
逆方向にループさせる方法：親ボックスを180度回転させて、写真をさらに180度回転させる
通常、要素は右から左にむかって流れます。標準の機能では再生の方向を指定することはできませんが、工夫すれば逆方向（左から右）に流すことができます。
方法は簡単で、カルーセル全体が入ってる親ボックスを180度回転させて上下逆さまにし、次に最下層にある写真を180度回転させます。これで左から右に流れる設定が完了です。
スマホで表示したときにループが一瞬止まる挙動を示すことがある
この記事で紹介している方法で自動ループを実装し、PCでは想定通りの動きをしたのに、スマホで表示するとループが一瞬止まる現象が発生することがあるようです。
どのような条件下で再現されるかはわかっていないので、現時点では完全に回避することが難しいのですが、「送り時間」に大きな値を設定して、よりゆっくりループさせることで目立たなくさせることはできます。
注意点：画面上に同時に表示できるアイテム数は最大7件
各アイテムのボックスサイズを小さくして、複数のアイテムを画面上に同時に表示する場合の最大数は「7」件です。つまりサイズ次第では、下記の例のように画面横幅いっぱいにループが広がらなくなるという問題が起きます。
対策として、1つのボックス内に2つの写真を入れることで、見かけ上は同時に7件以上のアイテムをループさせることができます。
下図のようにリストの1行に2枚の写真をセットし、それぞれを割り当てます。
上方向や下方向へのループも実現可能ではあるものの、扱いが非常に煩雑になる
逆方向のループの手順を応用して上方向や下方向に流すこともできますが、横幅や縦幅の設定が非常に難しくなります。
使いどころに応じて個別の設定値を考えれば実装可能ではありますが、レスポンシブ対応した形で手順を一般化するのは難しいため、今回は紹介を見送りたいと思います。
代替手段：長時間再生のアニメーションを応用することで、ループ風のデザインを実装できる
STUDIO Showcaseのファーストビューで使われている、「背景で画像が縦方向にスクロールしている」デザインは、アニメーションを長時間かつゆっくり再生することで「ループしているように見せている」という仕組みになっています。
この方法であれば、縦方向も比較的簡単に実装できます。
設定しているアニメーションの再生時間が終わるとスクロールは止まるため、本当のループではありませんが、背景で流れている写真は装飾扱いなのでじっと眺めている人はそれほどいないだろうという想定です。
ちなみに以下のサンプルは40秒経つと画像の動きが止まります。
構造としては「エリアから大きくはみ出る長いボックスを用意し、その中に画像を入れて、アニメーションでゆっくり動かす」となっています。
流したいアイテムを入れた親ボックスに対して「出現時」のアニメーションで以下の数値を設定します。
イージング：cubic-bezier(0 , 0 , 0.85, 1 )
完全な直線にすると止まるときの挙動が「いきなりピタッと止まる」となるので、「徐々に減速して止まる」ようにするためにこのような設定にしています。
サンプルでは「cubic-bezier(0 , 0 , 0.85, 1 )」としています。
最後までじっと見続ける人はほとんどいないという前提ではありますが、念のため設定しています。
時間：任意の値（通常時より非常に大きな数値）
再生時間は非常に大きな値を設定します。適切な時間については画像の数やサイズ、画像を流すエリアのサイズによって変わってくるため一概には言えませんが、サンプルは「40000」にしています。
移動：任意の値（非常に大きな値）
移動についても非常に大きな値を設定することになります。プレビューで確認しながら、ちょうどよい数値を探ってみてください。サンプルでは、左から2列目は「-1240」に設定しています。
マイナスの値を入力すると、上から画像が流れてきます。反対にプラスの値を設定すると下から画像が流れます。
写真が順番に切り替わるスライドショーの実装手順
右から左に流れていくデザインではなく、1枚の大きな写真が順番に切り替わっていくスライドショーも実装することができます。
以下のツイートをご参考ください。
写真の切り替わり方をアレンジしたバージョンもあります。
まとめ
カルーセルに自動再生機能が追加されたことで表現の幅が一気に広がりました。今回は写真を例にご紹介しましたが、背景で薄い色のテキストをループさせるなどの表現も同じ要領で実装可能です。
カルーセルの自動再生の挙動が安定しないときや、縦方向に流したいときなどは、代替手段として「アニメーションを長時間再生することでループ風に見せる」パターンを検討するのが良いかと思います。
