キレイ好きを公言しているのに、仕事机の周りがグッチャグチャになっている、ユゲタです。
でも血液型はB型・・・
世の中で最も嫌われがちな血液型B型・・・
そんな事はどーでもいいんですけどね。今日も嫁が片付けてくれて有り難い限りです。
svgのloadingアニメ素材も回数をこなして来て、こなれてきましたが、今回はもっと簡単にこうした素材が作れないかという意見を友達からもらったので、最も簡単に作れそうなやり方をご紹介します。
簡単な素材の作り方
loadingアニメは、どんな素材でもいいので、グルグル回ってさえいれば、それっぽく見えます。
なので、無料svg素材サイト（pngでもいいんですが）で素材をダウンロードして、その素材をぐるぐる回せばいいだけなんですね。
僕がよく利用するアイコン素材サイトで２つほど作ってみました。
https://www.flaticon.com/
こちらから、適当にタイプの違う２つほどの素材をDLして作ってみました。
<svg class="cycle" xmlns="http://www.w3.org/2000/svg" viewBox="-13 -8 74.642 79.642">
<style>
svg.cycle .arrow{
fill : black;
transform-origin:26.321px 29.222px;
animation : anim-cycle 2.0s linear infinite;
}
@keyframes anim-cycle {
0% {
transform : rotate(0deg);
}
100% {
transform : rotate(360deg);
}
}
</style>
<path class="arrow" d="M42.379,14.451c-0.645,0.521-0.746,1.465-0.226,2.109c2.942,3.647,4.497,8.058,4.496,12.754 c0,11.209-9.119,20.328-20.329,20.328S5.991,40.523,5.991,29.314c0-7.799,4.537-14.767,11.219-18.149 c2.463-1.247,4.161,0.491,3.503,3.173l-1.262,5.14c-0.198,0.804,0.294,1.616,1.099,1.814c0.12,0.029,0.241,0.043,0.359,0.043 c0.675,0,1.288-0.458,1.456-1.143l3.316-13.497c0.185-0.752-0.234-1.522-0.967-1.775L10.72,0.083 c-0.392-0.135-0.801-0.1-1.146,0.068c-0.585,0.285-0.977,1.42-0.693,2.006C9.049,2.503,9.349,2.784,9.74,2.919l6.18,2.136 c2.61,0.901,2.517,2.134,0.047,3.369c-7.725,3.865-12.975,11.9-12.975,20.89c0,12.863,10.465,23.328,23.329,23.328 c12.863,0,23.329-10.465,23.329-23.328c0-5.312-1.833-10.51-5.161-14.637C43.968,14.032,43.025,13.931,42.379,14.451z"/>
</svg>
<svg class="load4" viewBox="0 0 509 509" xmlns="http://www.w3.org/2000/svg">
<style>
svg.load4 .cycle4{
fill : black;
transform-origin:254.8px 254.8px;
animation : anim-cycle4 2.0s linear infinite;
}
@keyframes anim-cycle4 {
0% {
transform : rotate(0deg);
}
100% {
transform : rotate(-360deg);
}
}
</style>
<g class="cycle4">
<path d="m255.589844 463.515625h-.210938c-63.582031 0-122.125-29.503906-159.824218-79.746094-5.710938-7.617187-3.886719-18.480469 4.191406-23.503906 6.929687-4.304687 16.113281-2.800781 20.976562 3.746094 31.664063 42.511719 81.023438 67.503906 134.65625 67.503906zm0 0"/>
<path d="m361.363281 411.992188-.015625-.015626c-4.304687-6.925781-2.800781-16.125 3.761719-20.992187 42.621094-31.664063 67.664063-81.070313 67.664063-134.78125l32-.800781v.816406c0 63.679688-29.570313 122.269531-79.90625 159.984375-7.613282 5.695313-18.480469 3.871094-23.503907-4.210937zm0 0"/>
<path d="m47.605469 256.601562v-.382812c0-63.503906 29.4375-122 79.550781-159.695312 7.601562-5.730469 18.480469-3.90625 23.503906 4.160156v.015625c4.320313 6.925781 2.816406 16.109375-3.726562 20.992187-42.386719 31.628906-67.328125 80.957032-67.328125 134.527344zm0 0"/>
<path d="m389.84375 145.753906c-31.679688-42.335937-80.960938-67.214844-134.464844-67.214844l-.589844-32.015624 1.917969.078124h.160157c62.160156 0 120.433593 29.34375 158.113281 79.34375 5.726562 7.601563 3.917969 18.464844-4.144531 23.503907-6.929688 4.320312-16.113282 2.832031-20.992188-3.695313zm0 0"/>
<path d="m389.84375 292.777344c-6.253906-6.253906-6.253906-16.382813 0-22.625l57.472656-57.453125 57.457032 57.453125c6.238281 6.242187 6.238281 16.386718 0 22.625-6.242188 6.242187-16.386719 6.242187-22.625 0l-34.832032-34.832032-34.847656 34.832032c-6.242188 6.257812-16.367188 6.257812-22.625 0zm0 0" />
<path d="m62.164062 299.402344-57.472656-57.457032c-6.253906-6.238281-6.253906-16.382812 0-22.625 6.242188-6.238281 16.367188-6.238281 22.625 0l34.847656 34.832032 34.832032-34.832032c6.238281-6.238281 16.382812-6.238281 22.625 0 6.238281 6.242188 6.238281 16.386719 0 22.625zm0 0" />
<path d="m210.644531 504.808594c-6.257812-6.253906-6.242187-16.382813 0-22.621094l34.847657-34.832031-34.847657-34.847657c-6.242187-6.242187-6.242187-16.386718 0-22.625 6.238281-6.242187 16.382813-6.242187 22.625 0l57.46875 57.472657-57.46875 57.453125c-6.242187 6.257812-16.386719 6.257812-22.625 0zm0 0" />
<path d="m277.492188 119.835938-57.472657-57.457032 57.472657-57.472656c6.238281-6.242188 16.382812-6.242188 22.625 0 6.238281 6.238281 6.238281 16.382812 0 22.625l-34.847657 34.847656 34.847657 34.832032c6.253906 6.238281 6.253906 16.382812 0 22.625-6.257813 6.238281-16.386719 6.238281-22.625 0zm0 0" />
</g>
</svg>
デモ
解説
svg素材をDLしたらその中にstyleタグを追加して、素材内の要素にanimationをセットするだけなんですが、少しだけ難しいポイントは、回転する中心点をtransfom-originで指定する際の座標の見極め方です。
1番目の矢印も、上下左右の対象画像ではないので、画像自体のサイズの中心点にすると、ズレが生じます。
手打ちで微調整してもいいのですが、小数点以下の値が必要である場合が多いので、できればsvgの座標が取得できるinkｓpadeなどの編集アプリで座標を抽出して、若干の計算を行って算出するのが良さそうですね。
めんどくさい人は2番目素材のように、上下左右対称素材を使うｔぽサイズの半分で中心点を取得することも用意ですよ。
関連リンク
他のNowLoadingも見る
