最近一番面白い作業は、過去に作ったプログラムのリファクタリングです。
物事に飽きっぽい僕は、新しくサービス構築や、ライブラリを作ると、これまでの自分のコーディングルールをもうちょっと効率的に書けると気がついてしまいます。
これは、コーディングをする人が誰もが経験する事ですが、それが何度か積み重なると、以前のコーディングルールと大幅に変わってきてしまい、過去に作ったプログラムがとても陳腐に見えてしまいます。
そうなったら、自分にとっての最新の効率の良いプログラムに直さずにはいなれなくなってしまいます。
あ〜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.
0 件のコメント:
コメントを投稿