実際に使ってみるHTMLCoffeeScriptIE7や8などの下位互換について参考サイトおわりにはじめにJavaScriptでアニメーションをする時に定番化してきているrequestAnimationFrameですが、npmで探せば、使いやすそうなライブラリが沢山出てきます。したコードで使いたいときにわざわざライブラリを入れるのもなぁ〜と思い、少し前にCoffeeScriptで簡単なラッパークラスを書いたので共有したいと思います。CoffeeScriptで書いたクラス下記ではAnimationFrameというクラスを定義しています。CoffeeScriptに貼り付けるのが簡単かと思います。使い方ちっちゃいクラスだしメソッドも少ないのですが一応ご紹介しまっす!各フレーム毎の処理を用意AnimationFrameのコンストラクタに繰り返し用の関数を指定します。返ってきたインスタンスのrun()メソッドを実行すると、コンストラクタで指定した関数が繰り返し実行されます。animator.run()また、下記の様にミリ秒を指定することで開始時間を遅延することが出来ます。止めるときはstop()メソッドを実行します。animator.stop()アニメーション実行中か判定isRunning()メソッドの戻り値がtrueなら実行中、falseならアニメーションが止まっています。animator.isRunning()実際に使ってみる下記では要素が円運動をするアニメーションとなっています。DEMOではjQueryを使っています。動作はDEMOから確認出来ます。animator.run()IE7や8などの下位互換について単純にrequestAnimationFrameが定義されていない場合、setTimeoutでフォールバックしているので同じ様に動作する様になっています。各フレームでrequestAnimationFrameはタイムスタンプを返すので、そこも各フレーム実行時のミリ秒から開始時間を引くことで擬似的に対応しています。cancelAnimationFrameも同様です。canvasのアニメーションおわりにクラスのコード自体複雑なことはしていないので、あまりこだわらず、さっと使いたい時には丁度いいかもです。この記事のコメントメールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。