【jQuery】フレームレートを変更するAPI「jQuery.fx.interval」

【jQuery】フレームレートを変更するAPI「jQuery.fx.interval」

なるべく扇風機で過ごしたいhakoishiです。
すでにムリっぽい。

さて、今回はjQueryのアニメーションのフレームレートを変更できるAPIのご紹介です。
負荷下げたい、とかシンプルな動きにしてデバッグしたい、とかに使えるのでは。

jQuery.fx.interval

フレームレートを下げる、と書きましたが、正しくは1フレームあたりのミリ秒数を指定するものとなります。


jQuery.fx.interval = 【1フレームあたりのミリ秒数】;

デフォルト値は13ミリ秒。
1秒が1,000ミリ秒ということは、1000 / 13 = 約77fps
…デフォルトのフレームレート、結構すごかった。

影響範囲はjQueryで制御しているアニメーションとなります。
CSSアニメーションには干渉しません。

サンプルを作りましたので、よろしければポチっと。

1秒かけて、四角が右に移動します。
上がjQuery、下がCSSでのアニメーションです。

下の「フレームレート変更」欄で1フレームあたりのミリ秒を指定できますので、 500(fps2)とか、200(fps5)とか、極端な数値にしてみてください。
上の四角だけ、フレームレートが変わってカックカクになったのがご確認いただけたかと思います。

参考サイト

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ