Behanceで見つけたJohn PawsonさんのこのアニメーションをAdobe XDで再現してみたく、試しに作ってみたらとても簡単に出来たのでご紹介したいと思います。今回はそのうちの、文字の色がホバー時に左からか変化するやり方をご紹介します。

今回はこのようなアニメーションを作っていきます。

基礎的なホバーフィルの作り方

まずは、基本的なホバーフィルの作り方を見てみましょう。

ホバーステートを作成して色を変えるだけで作ることが出来ます。もし少しホバーステートの使い方に不安がある方は、こちらで１から説明してますのでご覧になってください。

この使い方は、例えば写真の上をホバーさせたときに色を薄くさせるアニメーションなどの再現が出来ますよね。ですが、この方法だと左から色を変える動きを再現できません。なので違った方法で作成していきます。

作り方

今回は、マスキングを使って作ります。簡単に出来ますので、一緒に作ってみてください。では行きましょう！

テキストの用意

特にどのフォントでも構いません。太いフォントのほうが見やすいかも知れないですね。あと日本語でも出来ますよ。試してみてください。

初期の色を決めて、コピーしてテキスト上にペイスト

ホバー時前の好きな色にしてください。

• Command ⌘/Ctrl + C コピー
• Command ⌘/Ctrl + V ペイスト

これで簡単にテキスト上に貼り付け出来ます。テキストが２つ重なった状態です。

上のテキストのカラーを変える（ホバー時）

上のテキストがホバー時のカラーになりますので、好きな色に変えててください。もし下部のテキストの端が見えて気になる方は、上部のテキストに小さい境界線を追加すればいいと思います。

長方形をテキスト上に作成してマスク

この長方形でマスキングを行います。長方形をテキストより大きく作ってください、マスクした際に透明になりますので色は特に何色でも構いません。長方形と長方形の一つ下（上部）のテキストを選択して、マスクしてください。レイヤーのタブで選ぶとやりやすいです。

• Command ⌘/Ctrl + Shift + M マスク

全てを選択してコンポーネント化、そしてホバーステートの追加

上下のテキストを選択して、コンポーネント化してください。コンポーネント化は右クリックして選択するか、右のタブにあるコンポーネントの＋を押せば作れます。ホバーステートの追加も同じ箇所にある＋で作成できます。

マスキングをずらす

あとは初期ステートを選択してマスキングに使用している長方形をテキスト外にずらすします。マスク外にテキストが出たことによって、上にあるテキストを消すことが出来ます。Shift を押しながら方向キーを押すと素早く動かせます。

ホバーステートでもずらす

ホバーステートはマスクがテキスト上に来るようにしてください。

完成です。

あとは初期ステートを選択してプレビューでホバーしてみてください。ホバーステートのままだと動きませんのでご注意を。もしそれでもうまく動かない場合は、プロトタイプへ行き問題がないか確認してみてください。

ホバーアクションで多くのアニメーションを再現することが出来るようになりましたね。他にもAdobe XDで出来るアニメーションをご紹介しているので、チェックしていってください。

ではまた！

Webデザイン入門オンライン講座