[SVG] loadingアニメーション #くるくる系2

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

こんにちわ。
 

自宅で乗っている車の17年目の車検を行った下駄です。
 

17年乗っているけど車の走行メーターは5万キロをちょっと超えたぐらい。
 

最近は、毎日スポジムに行く往復10キロぐらい乗っていますが、リーマン時代は週末に近所のスーパーに行く(往復5キロ程度)ぐらいしか乗っていなかったので、ペパドラ寸前でしたね。
 

野ざらし車庫なんで、車のボディもボロボロになってきたんですが、まだまだ可愛がってやろうと思います。
 

先日メーカーから、「交換パーツがだんだん無くなってきてますよ。」と早く買い換えろメッセージをいただきましたが、そんなことには負けません!!!
 

そして、今回のloadingアニメ素材は、素材をくるくる回すだけの比較的スタンダード系を2つです。

ソース

 

 

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

解説

「矢印ぐるぐるアニメの2重構造」と「短いバーがくるくる回転する系」の2種類ですが、どちらもtransform-rotateで動かしています。
 

short-barの方は、普通にrotateしてしまうと、なめらかに回転してしまうので、0.01ぐらいのタイミングでわざとカクカクするアニメにしています。
 

cubic-bezierを使って、シンプルなkeyframeにできないかあーだこーだしてみましたが、無理でしたね。
 

cssアニメでこうした動きをする際は、view< ->hiddenで行ったほうがいいのかもしれません。
 

ただ、汎用的に使えなそうなので、rotateで行っておきました。
 

2重ループの矢印アニメは、内側を逆向きに回しても面白い効果がでるかもしれませんね。
 

こうしたアイコン素材にアニメーションを付けていく作業、意外と面白くて最近ハマっています。
 

毎日作り上げていったら結構いいライブラリが作れるかもしれませんね。

Leave a Reply

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