Adobe XDで作る無限ループアニメーションをマスターしよう

こんにちは！えびです！
Adobe XDには自動アニメーションという、お手軽にアニメーションが作れる機能があります。
今回は、自動アニメーションで作れる無限ループアニメーションの作り方を解説していきます。

無限ループアニメーションとは

先日、以下のようなツイートをしました。

AdobeXDの「自動アニメーション」で波打つようなループアニメーションの作り方を紹介する動画を作りました！🌊
たったの2枚のアートボードで作れるアニメーションです
是非ご覧ください！

今日から始めるAdobeXD
さざ波アニメーションを作ってみよう#AdobeXD#今週のエビ君 pic.twitter.com/udYklMI7h4

— えび🍤@XD芸人 (@pino_ebiebi) October 9, 2020

波形が無限ループするアニメーションの作り方です。ただ、かなり駆け足でどのような原理で無限ループを実現しているか、わかりにくかったかと思います。

今回は自動アニメーションの使い方、無限ループの原理の解説から始め、以下のような無限ループアニメーションを作れるようになることが目標になります。 

いずれもアートボード2枚だけで作成できます。
シンプルな3種類のループアニメーションですがこれらを覚えることで、前述の波状アニメーションや、以下のようなアニメーションへの応用が可能です。

無限に落ちてくXDUFロゴ作りました！#XDUFesハンズオン pic.twitter.com/EREaBgop4i

— えび🍤@XD芸人 (@pino_ebiebi) September 26, 2020

無限ループアニメーションを覚えると、XDのアニメーションの幅が拡がります。サイトやアプリのデザインだけでなく、スライドなどにも応用できますので、是非覚えてみてください！

以下、有料となりますが詳しい解説の他、サンプルファイルの配信もしますので、気になった方は購入お願いいたします。