Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【js/後半】window.requestAnimationFrame() を解説してみた🌟

では後半です。

invoke - 要請する(実行する)

function - 関数

parameterパラメーター(共数) - パラメーター

argument引数(実述) - 引数

ニュアンス的には「引数」だとどうもピンと来にくく、「実述」の方が翻訳的にしっくりくるのですが…個人的に…しかも造語ですが…w

後半ではrequestAnimationFrame(callback)のcallback function についてです。その解説に入る前に、必須知識としての、「function parameterパラメーター(共数)」「function argument引数(実述)」 についてまとめおきます。

function parameterパラメーター(共数) と function argument引数(実述)

function parameterパラメーター(共数)とは、functionを定義する際に、関数とセットで予め定義しておく変数名です。

function getSum (num1, num2) {
    return num1 + num2;
}

そして実際に関数をinvokeする際には parameterパラメーター(共数) に値を代入して関数を実行します。この際、実際に代入する値のことを argument引数(実述) と呼びます。正式には代入と言わず、「渡すpass」という語が通常使われています。英語では「argument引数(実述) is passed to the function(引数が関数に渡される)」と言い、日本語でも「関数に引数を渡す」という表現がよくされています。

var sum1 = getSum(2, 3); // var sum1 = 5

この場合だと、getSum関数のparameterパラメーター(共数)は2つで、argument引数(実述)が 2 と 3 だ」とか「getSum関数にargument引数(実述)として数値を渡す」とかいうような言い方をします。

function にparameterパラメーター(共数) を設定し、様々な argument引数(実述) を function に渡すことによって、ルーティンワークを効率化したりと、様々な振る舞いが可能になります。

 

 

さて、それではrequestAni..(callback)callback function について解説していきます。

 

 

requestAnimationFrame()のcallback function の parameterパラメーター(共数)

ではもう一度アニメーションのコードとdemoを。

JS Bin on jsbin.com

 

CSS

#ani {
   position: absolute;
   width: 100px;
   height: 100px;
   background: crimson;
   }

 

HTML

<div id="ani"></div>

JavaScript

var elm = document.getElementById("ani");
var n = 0;

var id = requestAnimationFrame(function animate() {

   elm.style.left =  2*n + "px";
   if (parseInt(elm.style.left) > 200) {
      cancelAnimationFrame(id);
   } else {
      n++;
      requestAnimationFrame(animate);
   }

});

(未読の方は、拙過去記事  【js|前半】window.requestAnimationFrame()を解説してみた🌟 - Kazuma Labolatory's をご覧下さい)


requestAnimationFrame(callback)は、このcallback functionに予め argument引数(実述) が内蔵(built-in)されています。どいうことか、まずは実際にdemoを見てみましょう。

 

JS Bin on jsbin.com

 

JavaScript

var elm = document.getElementById('ani');
var n = 0;

var id = requestAnimationFrame(function animate(e) {
    elm.style.left =  2*n + "px";
    n++;
    
    elm.innerHTML = typeof e + '<br>' + e;
    
    if (parseInt(elm.style.left) > 200) {
        cancelAnimationFrame(id);
    } else {
        id = requestAnimationFrame(animate);
    }
});

 変更点は、function animate()function animate(e)にしたのと、elm.innerHTML = ...を追加しただけです。elm(赤ブロック) に
「 parameterパラメーター(共数) eのタイプ」
「e そのもの」

がそのままアウトプットされています。

これから分かる通り、requestAni... の parameterパラメーター(共数)(argument引数(実述)) e のタイプは数値です。

そして、その下に変化しながら表示されている数値、これは表しているのは「時間」です。animation 開始時(callback開始時) を0:: ページ下部補足 :: ページロード時を0として、増加していく時間です。ミリ秒単位で返値されます。つまり 1000だとアニメーション開始 ページロード開始から1秒たった事を表しています。

また、小数点が付いていますが、この時間はマイクロ秒単位で正確な時間です。1/1000 秒 のさらに 1/1000 秒です。

requestAni... に parameterパラメーター(共数) を設定すると、argument引数(実述)としてマイクロ秒単位で正確な時間を取得することができます。この場合だと、animate() に e という parameterパラメーター(共数) を設定することによって(割り当てる名前identifier(識別名)はどんな名前でもOK)、実際にfunction が実行された際に、function body関数本体({}の中身) の e に アニメーション実行時間が逐次返値されるということです。

正式な言い方だと、requestAnimationFrame メソッドの callback function は、一つの argument引数(実述) を伴い、DomHighResTimeStampを返値する、ということです。

RequestAnimationFrame |「Timing control for script-based animations」 -W3C-

DomHighResTimeStamp |「High Resolution Time Level 2」 -W3C-

 

DomHighResTimeStamp の用途は、各自が定義するfunction次第で様々な使い方ができます。簡単な一例ですと、「アニメーション開始から3秒後にアニメーションを終了する」funcionを、この argument引数(実述) を使って作ったりすることができます。

 

 

失礼しました_(:D」L)_💦
ページロード時を0 (基準点)とした時間(正確にはWindow Object の document Objectが新規作成された時。要参照)。上記デモは、ページロードと共にアニメーションがスタートするので、ほとんど分かりませんが、例えば「クリックイベント」でDOMHightResTimeStampを使うと、よく分かります。
因みに、クリックによってアニメーションが開始されるような場合、アニメーション開始からの経過時間を知りたい場合は、window.performance.now()DOMHightResTimeStampの差によって求めます。

Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️