[SVG] loadingアニメーション #最も簡単な素材の作り方「矢印ぐるぐる編」

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

こんにちわ。
 

キレイ好きを公言しているのに、仕事机の周りがグッチャグチャになっている下駄です。
 

でも血液型はB型・・・
 

世の中で最も嫌われがちな血液型B型・・・
 

そんな事はどーでもいいんですけどね。今日も嫁が片付けてくれて有り難い限りです。
 

svgのloadingアニメ素材も回数をこなして来て、こなれてきましたが、今回はもっと簡単にこうした素材が作れないかという意見を友達からもらったので、最も簡単に作れそうなやり方をご紹介します。

簡単な素材の作り方

loadingアニメは、どんな素材でもいいので、グルグル回ってさえいれば、それっぽく見えます。
 

なので、無料svg素材サイト(pngでもいいんですが)で素材をダウンロードして、その素材をぐるぐる回せばいいだけなんですね。
 

僕がよく利用するアイコン素材サイトで2つほど作ってみました。
 

https://www.flaticon.com/
 

こちらから、適当にタイプの違う2つほどの素材をDLして作ってみました。
 

 

 

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


 

解説

svg素材をDLしたらその中にstyleタグを追加して、素材内の要素にanimationをセットするだけなんですが、少しだけ難しいポイントは、回転する中心点をtransfom-originで指定する際の座標の見極め方です。
 

1番目の矢印も、上下左右の対象画像ではないので、画像自体のサイズの中心点にすると、ズレが生じます。
 

手打ちで微調整してもいいのですが、小数点以下の値が必要である場合が多いので、できればsvgの座標が取得できるinkspadeなどの編集アプリで座標を抽出して、若干の計算を行って算出するのが良さそうですね。
 

めんどくさい人は2番目素材のように、上下左右対称素材を使うtぽサイズの半分で中心点を取得することも用意ですよ。

Leave a Reply

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