armband.qrunch.io読者になる2SVGで円弧を描くアニメーションを実装するSCSSjQuerysvgkeyframe投稿日:2019-04-14最終更新:2019-04-14クロス元の投稿をみる(https://labor.ewiglee...)たまに見かける、アイコンや画像の周りを円弧がぐるっと1回転するアニメーション。これをどうにか実装できないかと考えて、なんとか形にすることができたので書き留めます。実は今までSVGを触ったことがなかったため、今回初めてで手探りとなりました。コードできたコードが下記。サンプルのためBootstrap4とFontAwesome利用です。</div>今回は直径400px、線の太さ10px(cssで指定)の円弧をベースにします。heightで400を指定。円弧を描くためsvgの子要素にcircleタグ。cy属性は直系の半分で200。実際の半径を指定するrですが、線の太さを加味します。今回は10pxで、中心が半径に当たるので線の太さの半分の値を直系の半分から差し引いて195です。}上記の通り、keyframeアニメーションで円弧を描きます。}JavaScript(jQuery)でやることは「スクロール量を計測し、各SVGに対する閾値を越えたらクラス付与する」ことだけです。これで、以下のように要素が見えたところまでSVGがスクロールすると円弧を描くアニメーションが実行される、という形です。思ったよりもサクッとできて良かった。Qrunch.netサーバー提供フィードバックを送信する。