一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

requestAnimationFrameを使ってみた

この前、jsでアニメーションをつくるときはsetIntervalよりrequestAnimationFrameを使った方がいい!という話を聞きました。

自分はrequestAnimationFrameを正直まともに使った事がなかったので、今回サンプルを作って試してみました。


まず作ったサンプルはこちら↓
http://jsfiddle.net/d_animal141/kumAF/18/embedded/result/

ふつうに青い四角がひたすら右に移動していくといっただけのアニメーションになります。
(今回はrequestAnimationFrameの大まかな使い方をみたかっただけなので。。)


で、実際に書いたコードは以下のような感じです。

//html

<div id="obj"></div>
//css

#obj{
   width:50px;
   height:50px;
   background-color:blue;
   position:absolute;
}
//js

// requestAnimationFrameの設定
 (function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;
})();

//frameの変数
var i = 0;

//アニメーションの動き
function anime(){
    var obj = $("#obj");
    obj.css("left", i + "px");
    i++; 
}
//アニメーションを繰り返す処理
function animeloop(){
    anime();
    requestAnimationFrame(animeloop);
};
animeloop();


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

を参考にさせていただいたのですが、

はじめに各ブラウザに対応するためにrequestAnimationFrameという変数に該当するものを入れておいてから使うようにしています。


つぎに繰り返したいアニメーションのメソッドを用意します。
今回は、位置を1pxずつ右に移動させるようなものを用意しました。


最後にanimeloopというメソッドで、まず繰り返したいメソッドをよび、その後、requestAnimationFrameの引数に自分自身を設定して、処理を繰り返すといった流れになります。だいたいsetIntervalと一緒な感じですね。


今後は徐々にアニメーションの実装などをする機会も増えるかなーと思っているので、また新しい事を随時アウトプットしていけたらと思います。

がんばるぞー

小さな事からコツコツと。