requestAnimationFrameでCSSの回転アニメーションを模倣する

こんにちわ。nap5です。

requestAnimationFrameでCSSの回転アニメーションを模倣するやり方の一つを紹介したいと思います。

https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame

Window.requestAnimationFrame() - Web API | MDN

完成するUIは以下のようなイメージになります。

まず、CSSで実装したサンプルです。

CodePenに動作確認できるサンプルを置きました。

CSSで実装した場合は回転速度をanimationプロパティで調節できるので、0.2sや30sなどに設定しなおすと、回転速度を速くしたり、遅くしたりできます。

次にJSで実装したサンプルです。

CodePenに動作確認できるサンプルを置きました。

JSで実装した場合は回転速度をカウントアップ量で調節できるので、+111や+1などに設定しなおすと、回転速度を速くしたり、遅くしたりできます。

この場合だとCSSで実装したほうがきれいなアニメーションを実装しやすいのですが、JSで真似するとどのように実装できるか簡単に挑戦してみた記録となります。

簡単ですが、以上になります。