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

WEB

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

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

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

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

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

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

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

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

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


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

この記事を書いた人
KEITO

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

WEB
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました