読者です 読者をやめる 読者になる 読者になる

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

マテリアルデザインのアニメーション大全サンプル集付き。

f:id:tkosuga:20151109125255j:plain
Photo credit: Gattou - Lucie Provencher

※2015/11/9日時点の情報です。

いま流行中のマテリアルデザインの肝は?と聞かれるとやっぱりアニメーションですよね。シンプルなアニメーションによってユーザーインターフェイスの意図が伝わり易くなります。

マテリアルデザインで使われるアニメーションについてのパターンや情報がまとまっているページが見当たらなかったのでこの記事にずらーっとまとめて行きます。

Dribbbleでマテリアル+アニメーションで検索

Dribbbleで検索すると良質なサンプルがたくさん見つかります。

dribbble.com
dribbble.com
dribbble.com
dribbble.com
dribbble.com

CODEPENで公開されているサンプル

CSSのみでボタンアニメーション

codepen.io

カーソルに合わせるとプレステのコントローラーのように分割するボタン

codepen.io

プリローダー

codepen.io
Material Preloaderも合わせてご覧ください。

materialupで見るサンプル

ボタンのアニメーションパターン

www.materialup.com

マテリアルデザインのサンプルを探すのにCodePEN、Dribbble以外ではMaterial Design, Daily – MaterialUpもおススメです。

YouTubeで見るマテリアルデザインアニメーション

Google公式の説明

www.youtube.com

Instagramのアプリで見る動き

www.youtube.com

Adobe After Effectで作るマテリアルデザインアニメーション

www.youtube.com

Motion Masterのチャンネルで他にも登録されていました。

マテリアルデザインのサポートしているCSSフレームワーク

※注意※ アニメーションのサポートはボタンなどCSS transitionsを使って簡単に実装できる限定的な物が多いです。

マテリアルデザインのサポートしているJS向けのCSSフレームワーク

まとめ

アプリ全盛の時代、マテリアルデザインの流行と同時にReact等のUIコンポーネントがウェブでも徐々に使われ始めています。もしUIコンポーネントが主流になるとウェブサイト制作はデスクトップ環境のGUIアプリ開発に似てくるので今とはまた少し違った展開ありそうです。