[SVG] loadingアニメーション #cubeタイプ

2019/11/19

テクノロジー プログラミング

t f B! P L
最近一番面白い作業は、過去に作ったプログラムのリファクタリングです。 物事に飽きっぽい僕は、新しくサービス構築や、ライブラリを作ると、これまでの自分のコーディングルールをもうちょっと効率的に書けると気がついてしまいます。 これは、コーディングをする人が誰もが経験する事ですが、それが何度か積み重なると、以前のコーディングルールと大幅に変わってきてしまい、過去に作ったプログラムがとても陳腐に見えてしまいます。 そうなったら、自分にとっての最新の効率の良いプログラムに直さずにはいなれなくなってしまいます。 あ〜githubにアップしたやつ、全部なおして〜〜〜! そんな中、前にloadingアニメをHTML+CSS版で作ってたやつを、最近では、svgファイルで一括管理できるのが面白くて、使い勝手も非常に効率が良いため、ちょびっとずつ作り直しています。 今回は、前に作ったcubeアニメをsvgにリファクタ(Translate?)してみました。

cubeアニメーション

以前のloadingアニメ記事 CSSだけで作るLoadingアニメーション#4 いくつか掲載している中で、個人的にお気に入りのcubeアニメをsvgファイルに以下の書き込みをするだけで実現できます。 <svg class="cube" width="64px" height="64px" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"> <style> svg.cube .block > *{ fill:black; animation: anim-cube-grid 1.5s ease-in-out infinite; } svg.cube .block-1{ transform-origin:16px 16px; animation-delay: -0.2s; } svg.cube .block-2{ transform-origin:48px 16px; animation-delay: -0.1s; } svg.cube .block-3{ transform-origin:80px 16px; animation-delay: -0.0s; } svg.cube .block-4{ transform-origin:16px 48px; animation-delay: -0.3s; } svg.cube .block-5{ transform-origin:48px 48px; animation-delay: -0.2s; } svg.cube .block-6{ transform-origin:80px 48px; animation-delay: -0.1s; } svg.cube .block-7{ transform-origin:16px 80px; animation-delay: -0.4s; } svg.cube .block-8{ transform-origin:48px 80px; animation-delay: -0.3s; } svg.cube .block-9{ transform-origin:80px 80px; animation-delay: -0.2s; } @keyframes anim-cube-grid{ 0%{transform:scale(1.0);} 25%{transform:scale(0.0);} 50%{transform:scale(1.0);} 100%{transform:scale(1.0);} } </style> <g class="block"> <rect class="block-1" x=" 0" y=" 0" width="33" height="33"></rect> <rect class="block-2" x="32" y=" 0" width="33" height="33"></rect> <rect class="block-3" x="64" y=" 0" width="33" height="33"></rect> <rect class="block-4" x=" 0" y="32" width="33" height="33"></rect> <rect class="block-5" x="32" y="32" width="33" height="33"></rect> <rect class="block-6" x="64" y="32" width="33" height="33"></rect> <rect class="block-7" x=" 0" y="64" width="33" height="33"></rect> <rect class="block-8" x="32" y="64" width="33" height="33"></rect> <rect class="block-9" x="64" y="64" width="33" height="33"></rect> </g> </svg>

プレビュー

See the Pen svg-loading cube by YugetaKoji (@geta1972) on CodePen.

今日の一言

svgアニメは本当に面白く、内容はほぼcssアニメなのですが、描画ができ、より自由度の高いsvgを使ってのアニメーションは、HTMLタグ+CSSのアニメーション処理と比べると、可能性は無限大な感じです。 過去に作ったパーツなども、今回のようにちょびっとずつ作り直していけると、楽しめる&ホームページ制作の効率アップになること間違いありません。 同じように気に入ってくれた方がいらっしゃったら、どんどんコピって使ってくださいませ。

関連リンク

他のNowLoadingも見る

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ