XDを使った簡単なアニメーション
こちらの方のTwitter投稿からインスピレーションを受け、同じようにAdobe XDで簡単なアニメーションを作成してみました。
▼参考 コンセプトと動きが明快でいいですよね！
Light Mode ↔️ Dark Mode#cssnite #adobexd pic.twitter.com/lawKWqQzKj
— Eri Matsushita 松下 絵梨 (@matsu_eri) October 19, 2019
ハロウィン中のちょっとした遊びがコンセプト
僕はハロウィン中にダークモードに変えたら、こんなマイクロインタラクションが起きたら面白そうだなと思って作成しました。
ツール：Adobe XD （自動アニメーション）
所要時間：30分くらい。
Appleがハロウィン中にやりそうなマイクロインタラクション。
— Yousuke (@yousuke30663212) October 24, 2019
ダークモードにした瞬間、隠れていたかわいいオバケが出てくる。#design #microinteractions #XD #animation #Halloween pic.twitter.com/UDyKeB5p53
説明するほどではないですが、電気を消したらそこにお化けがいた！という設定のアニメーションになっています。
微妙に親子の距離感がずれていたり、太陽から満月、さらに三日月になったり、ほとんど気づかれないと思いますが、XDならサクッとアニメーションが作れます。
まとめ
XDはえらい！