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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

最近一番面白い作業は、過去に作ったプログラムのリファクタリングです。
 

物事に飽きっぽい僕は、新しくサービス構築や、ライブラリを作ると、これまでの自分のコーディングルールをもうちょっと効率的に書けると気がついてしまいます。
 

これは、コーディングをする人が誰もが経験する事ですが、それが何度か積み重なると、以前のコーディングルールと大幅に変わってきてしまい、過去に作ったプログラムがとても陳腐に見えてしまいます。
 

そうなったら、自分にとっての最新の効率の良いプログラムに直さずにはいなれなくなってしまいます。
 

あ〜githubにアップしたやつ、全部なおして〜〜〜!
 

そんな中、前にloadingアニメをHTML+CSS版で作ってたやつを、最近では、svgファイルで一括管理できるのが面白くて、使い勝手も非常に効率が良いため、ちょびっとずつ作り直しています。
 

今回は、前に作ったcubeアニメをsvgにリファクタ(Translate?)してみました。

cubeアニメーション

以前のloadingアニメ記事
 

http://wordpress.ideacompo.com/?p=11288
 

いくつか掲載している中で、個人的にお気に入りのcubeアニメをsvgファイルに以下の書き込みをするだけで実現できます。
 

 

プレビュー
 

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

今日の一言

svgアニメは本当に面白く、内容はほぼcssアニメなのですが、描画ができ、より自由度の高いsvgを使ってのアニメーションは、HTMLタグ+CSSのアニメーション処理と比べると、可能性は無限大な感じです。
 

過去に作ったパーツなども、今回のようにちょびっとずつ作り直していけると、楽しめる&ホームページ制作の効率アップになること間違いありません。
 

同じように気に入ってくれた方がいらっしゃったら、どんどんコピって使ってくださいませ。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です