行き着く先はあんこ

CSSだけでGoogle Pixelのブートアニメーションっぽいものを制作する

Google Pixelのブートアニメーションを作る

Google初の純正Andoidスマートフォン「Google Pixel」のブートアニメーションをCSSだけで作るという内容です。

スポンサーリンク

Pixel ブートアニメーション

まずはGoogle Pixelのブートアニメーションを確認します。下の動画のスマートフォンはGoogle Pixelではありませんが、ブートアニメーションの全体をイメージすることができます。

CSSで再現

作ってみたのがこれです。

デモページGoogle Pixel BootAnimation

4色の点がピョンピョンと永遠にはねるアニメーションです。

一連の流れの中では4点がなめらかに動いているように見えます。しかし、実際には20個の点があり、それぞれをopacityで消したりつけたりしています。というのも円周に沿ってはねる動作を行うためにこのアイデアしか思い付きませんでした。transform-originなどを使えばもう少し賢くできるかもしれませんが。

また、動画のアニメーションでは4点が重なり合うことがなく移動しています。しかしCSSアニメーションは何度も点が重なっていることが分かると思います。ただそれなりには見えるのでいいかなと。

さいごに

勉強ついでに他のブートアニメーションもCSSで作ってみたいと思います。

スポンサーリンク

スポンサーリンク

コメントを残す