CSSアニメーション（Keyframes）は手軽ですが、ユーザー操作への応答や複雑な演算（正弦波など）を用いた動きには不向きです。ブラウザの描画サイクルと同期し、60fpsの滑らかな動作を実現するには requestAnimationFrame が必須となります。 実務で即座に使える ...

気になることを自分でネットで調べつつ、AI birdに ついでに記事を書いてもらってるここ数日 今日はsvgアニメーションについて記事を書いてもらってみました ではどうぞ。 SVGアニメーションとは？ SVGアニメーションとは、スケーラブルベクター ...

SVGで棒グラフのバーをアニメーションさせる ベクターベースのSVGは、多くの解像度へ対応が必要な場面でとても有効な技術と言える。今回はSVGの画像を、JavaScriptを使用して簡単にアニメーションしてみよう。 SVGで描かれた画像はベクター形式のため拡大 ...

JavaScriptを使ってSVG図形をアニメーションさせてみましょう。JavaScriptではsetTimeout()かsetInterval()のタイマーを使ってアニメーションできます。 サンプル2と同様に図形を回転させる場合は、以下のようにtransform属性にrotate()を使って角度を逐次指定していきます。