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

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

こんにちわ。
 

Bluetoothヘッドホンに恵まれない下駄です。
 

購入してもすぐに壊れる連続で、すでに10個以上のヘッドホンを交換している状態です。
 

左右独立型で小さめのカナル型のが今の所仕様しているヤツですが、これもいつお亡くなりになるかわかりません・・・
 

やはりApple純正のヤツを買うのが良いのでしょうか?

Rainbow

本日のsvg-loadingアニメーションは、虹色のオブジェクトが楽しそうに動くアニメーションです。
 

 

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
 

あまり使い慣れていないのですが、使い慣れるとスーパーマリオのジャンプロジックのような事もできるかもしれませんね。
 

Leave a Reply

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