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

Creative

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

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

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

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

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

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

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

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

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

動画で見る

動画で詳しく説明しています。文章で分かりずらかった方は合わせてどうぞ。


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

2020年7月26日CreativeReference,Software,XD

Posted by KT