XDでくるっと回転するアニメーションを作成する方法

WEB

今回はXDを使ってオブジェクトがくるっと回転するアニメーションの作成の仕方を紹介します。
アニメーションはプロトタイプを利用すれば簡単なのだが、回転アニメーションに関しては若干癖のある作り方です。ただやり方を理解すれば超簡単に作成できます。

ぜひ覚えて活用してみて下さい。

XDでくるっと回転するアニメーションを作成する方法

今回は画面ローディング時のクルクル回ってるインターフェイスをイメージして作成していきます。

①まずは、デザインの土台を作成しましょう。円形の上に一回り小さい円形を作成してマスクで型取ります。

②次に小さい円形縦に長い長方形を作成してそれを重ねてグループ化します。

アートボードをまるっとコピーして、下記の部分(②で作成したグループ)のオブジェクトを360°回転させます。

④下記の状態までいったら、プロトタイプアートボード1からアートボード2に移動するアニメーションを追加して完成です。
アートボード2からアートボード1に戻るアクションは「ひとつ前のアートボード」に設定すればリピート出来ます。

実際の動きは、XDの画面右上にある▶︎マークを押すと確認できます。
今回作成した回転アニメーションをプレビューすると以下の様になります。


以上が「XDでくるっと回転するアニメーションを作成する方法」でした。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

WEB
この記事を共有する
KT LIFE
タイトルとURLをコピーしました