[SVG] loadingアニメーション #Rainbow

2019年11月25日

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

Bluetoothヘッドホンに恵まれない、ユゲタです。 購入してもすぐに壊れる連続で、すでに10個以上のヘッドホンを交換している状態です。 左右独立型で小さめのカナル型のが今の所仕様しているヤツですが、これもいつお亡くなりになるかわかりません・・・ やはりApple純正のヤツを買うのが良いのでしょうか?

Rainbow

本日のsvg-loadingアニメーションは、虹色のオブジェクトが楽しそうに動くアニメーションです。 <svg class="rainbow-spin" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <style> svg.rainbow-spin path{ transform-origin: 32px 32px; animation: spin 2.0s cubic-bezier(.175, .885, .32, 1.275) infinite; } svg.rainbow-spin .rainbow-1{ animation-delay: -50ms; } svg.rainbow-spin .rainbow-2{ animation-delay: -100ms; } svg.rainbow-spin .rainbow-3{ animation-delay: -150ms; } svg.rainbow-spin .rainbow-4{ animation-delay: -200ms; } svg.rainbow-spin .rainbow-5{ animation-delay: -250ms; } @keyframes spin { 0%, 15% { transform: rotate(0); } 100% { transform: rotate(360deg); } } </style> <path class="rainbow-1" fill="none" d="M 2,32 a28,28 180 0 1 60,0" stroke="rgb(255, 80, 80)" stroke-width="4" /> <path class="rainbow-2" fill="none" d="M 8,32 a22,22 180 0 1 48,0" stroke="rgb(255,255, 80)" stroke-width="4" /> <path class="rainbow-3" fill="none" d="M14,32 a16,16 180 0 1 36,0" stroke="rgb( 80,255, 80)" stroke-width="4" /> <path class="rainbow-4" fill="none" d="M20,32 a10,10 180 0 1 24,0" stroke="rgb( 80,255,255)" stroke-width="4" /> <path class="rainbow-5" fill="none" d="M26,32 a 4, 4 180 0 1 12,0" stroke="rgb( 80, 80,255)" stroke-width="4" /> </svg>

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

動きが面白くて、codepenに掲載されていたcssバージョンをsvgに移植してみました。 この素材は、背景が黒にするのが一番良く見えるのですが、白系や色系の背景の場合は、中の色味を変更して使うのがいいでしょうね。

少しだけ解説

アニメーション事態は、ソースを見て分かる通り非常にシンプルな動きをderayでタイミングずらしのパターンですが、css-animationの"cubic-bezier"という機能を使って、微妙なタイミングコントロールをしている点です。 この機能はあまり使われていないのですが、"timing-function"という、直線的な動作ではなく、曲線の奇抜な動きを構築することができます。 https://developer.mozilla.org/ja/docs/Web/CSS/timing-function あまり使い慣れていないのですが、使い慣れるとスーパーマリオのジャンプロジックのような事もできるかもしれませんね。

関連リンク

他のNowLoadingも見る