今回はXDを使ってオブジェクトがくるっと回転するアニメーションの作成の仕方を紹介します。
アニメーションはプロトタイプを利用すれば簡単なのだが、回転アニメーションに関しては若干癖のある作り方です。ただやり方を理解すれば超簡単に作成できます。
ぜひ覚えて活用してみて下さい。
XDでくるっと回転するアニメーションを作成する方法
今回は画面ローディング時のクルクル回ってるインターフェイスをイメージして作成していきます。
①まずは、デザインの土台を作成しましょう。円形の上に一回り小さい円形を作成してマスクで型取ります。
②次に小さい円形と縦に長い長方形を作成してそれを重ねてグループ化します。
③アートボードをまるっとコピーして、下記の部分（②で作成したグループ）のオブジェクトを360°回転させます。
④下記の状態までいったら、プロトタイプでアートボード1からアートボード2に移動するアニメーションを追加して完成です。
アートボード2からアートボード1に戻るアクションは「ひとつ前のアートボード」に設定すればリピート出来ます。
実際の動きは、XDの画面右上にある▶︎マークを押すと確認できます。
今回作成した回転アニメーションをプレビューすると以下の様になります。
以上が「XDでくるっと回転するアニメーションを作成する方法」でした。
