みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。
先日公開したこちらのXDアニメーションの記事について大変多くの方から反響がありました。
合わせて読みたい
しかし、、
全然わからない。。。
すごいけどマネする気にはなれない。。
と思った方は少なくなかったと思います。
今回は時間がない方でもすぐに作れるローディングアニメーションの作り方について紹介させていただきます。
目次
作成するローディングアニメーション
![](https://i.gyazo.com/c052b170ba23c68610f2a9182162f341.gif)
今回作成するローディングアニメーションは主に以下が重要なポイントです。
- マスクを使ったアニメーション
- シェイプを変化させたアニメーション
この2点だけ抑えれば簡単に作れます!
作成手順
![](https://i.gyazo.com/234507a75e2ff7656e6523064b9e836c.png)
使用するアートボードは2枚です。はじめに一枚のアートボードを作成し、複製して動かします。
作成手順まとめ
- パスの作成
- シェイプでマスク
- アートボードの複製
- 完成
STEP.1
パスの作成
ペンツール(P)でアートボードの左右両端までパスを引きます。
STEP.2
シェイプでマスク
数字のサイズに合わせて長方形のマスクを作成します。
数字を1桁ごとに改行し、自動アニメーション開始と同時に上下に動くように配置します。
同じ方向から動かないように上下に配置しました。
STEP.3
アートボードの複製
複製したいアートボードのアートボード名(左上)をクリック。
⌘+DもしくはControl+Dを押してアートボードを複製します。
複製したアートボードをアニメーション開始前の状態にします。
![](https://i.gyazo.com/ffe923a29dd5b816af017566f78e26ee.png)
バーとして両端まで引いたパスを左右いずれかに縮小します。
![](https://i.gyazo.com/dc8b6a6508a9638156d789a8eb7da2c3.png)
アニメーション開始前
![](https://i.gyazo.com/c8d9a5c65e925d4ee2476a9f08ec4d19.png)
アニメーション後
シェイプでマスクをかけた数値を「00%」の状態に動かします。
STEP.4
自動アニメーション
プロトタイプのタブに移ります。トリガーを「時間」に設定し、自動的にアニメーションが作動するように設定します。
STEP.5
完成
プレビューボタンを押して確認しましょう。お疲れさまでした。
まとめ
今回は以下について紹介しました。
- マスクを使ったアニメーション
- シェイプを変化させたアニメーション
今回以外にもXDのプロトタイプに関するアニメーションを紹介しています。
最後まで見ていただきありがとうございます!
是非記事の共有をよろしくお願いします。