Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

Re:リクアニ + % (modulo: "割り算の余り"の算出操作記号)

 

リクアニ・メソッドのコールバックの argument(時間) を可視化してみました。

下中央に表示されている4桁の数字は、
windom.requestAnimationFrame( callback(DOMHighResTimeStamp) )
DOMHighResTimeStamp (時間:以下 TimeStamp) です。つまり、ページロードと共にリクアニ・メソッドが開始され、その callback function の argument である TimeStamp が表示されるようにしてあります。

単位はミリ秒(ms)です。

TimeStamp (時間:ms)の基準点は、ページロード開始時です (正確には、window object の document object が作成された時window object の document property とも言う

 

 

Start!

DOMHighResTimeStamp(ms)

document object creation ~

(ms:millisecond)

DOMHighResTimeStamp(ms)

document object creation ~

    DOMHighResTimeStamp - window.performance.now()(ms)
    ( = duration)

    button click ~

      duration % 2000

      ( = reminder of duration / 2000)

        duration % 2000 / 4

        ( = "reminder of duration / 2000" / 4

          • 中央カウンター : 20秒後に停止
          • スタートボタンクリック : テキスト出力アニメーション : 3秒後に停止

          します🌟もう一度起動の際はページをリロードしてね🌟

          • 黄色の背景部分は、ボタンクリックから1秒間隔毎に引かれています。

           

           

          表の補足説明

          1行目: document object creation ~
          簡単に言うと、ページロード開始からの時間を表しています。
          2行目: duration
          ボタンクリックからの経過時間
          3行目: duration % 2000
          W3C のリクアニのSampleコード内にあった% (Modulo)がどのような値になるのか。「÷4」を取り除いた簡易版Show W3C Code!

          JavaScript

          var requestId = 0;
          
          function animate(time) {
             document.getElementById("ani").style.left =
                (time - animationStartTime) % 2000 / 4 + "px";
             requestId = window.requestAnimationFrame(animate);
          }
          function start() {
             animationStartTime = window.performance.now();
             requestId = window.requestAnimationFrame(animate);
          }
          function stop() {
             if (requestId)
                window.cancelAnimationFrame(requestId);
             requestId = 0;
          }
          4行目: duration % 2000 / 4
          W3C のリクアニのSampleコード内にあった% (Modulo)がどのような値になるのか。「÷4」有り

           

          このデモで知りたかったこと / 分かる事

          1. DOMHighResTimeStamp
          2. アニメーション開始からの時間の算出方法( window.performance.now()の使用 )
          3. operator演算子(操作記号)% (modulo)の計算式((

            modulo とは、プログラミングにおいて、余りの値を算出する operator演算子(操作記号)です。

            例えば、5 ÷ 3 = 1 余り2 の式で、余りの値:2 を使いたい時に、コードでは
            var a = 5 % 3 // a = 2
            と記述します。

            余りを知りたい・使いたい時に使うのが% ( modulo )と言うわけです。

            ** 割り算の「余りの値」は、英語では reminder と言います。

            ))
          4. リクアニの1秒間のフレーム数(デバイス・実行環境により異なる)

           

          position: sticky

          因みに、今回のメイン「リクアニ・メソッド」とは関係ないのですが、表のヘッダー部分がページアウトしそうになると位置が固定される、position: stickyも使っています。以前記事で紹介もしました。JavaScript を使わずに、Bootstrapで言う所の「affix(sticky) navbar」を実現することができるCSSのpositionプロパティ値です。これも勉強になりました(*´ω`*)🌟

          色々盛り込み過ぎて、分かりにくくなってしまいました…すみません(๑˃꒳˂๑)💦

           

          以下にソースコードを🌟

          HTML

          <div id="dStart">Start!</div>
          
          <div id="flexbox">
          
             <div class="itm">
                <div class="title">
                   <p><code><r>DOMHighResTimeStamp</r></code>(ms)</p>
                   <p>document object creation ~</p>
                </div>
                
                <ol id="d1"> <!-- TimeStamp 出力部分 -->
                </ol>
             </div>
             
             <div class="itm">
                <div class="title">
                   <p><code><r>DOMHighResTimeStamp</r> - window.performance.now()</code>(ms)<br>
                   ( = duration)</p>
                   <p>button click ~</p>
                </div>
                
                <ol id="d2">
                </ol>
             </div>
             
             <div class="itm">
                <div class="title">
                   <p><code>duration % 2000</code></p>
                   <p>( = reminder of <code>duration / 2000</code>)</p>
                </div>
                
                <ol id="d3">
                </ol>
             </div>
             
             <div class="itm">
                <div class="title">
                   <p><code>duration % 2000 / 4</code></p>
                   <p>( = "reminder of <code>duration / 2000</code>" / 4</p>
                </div>
                
                <ol id="d4">
                </ol>
             </div>
             
          </div>

          CSS

          /*--- button ---*/
          #dStart {
             position: fixed;
             bottom: 55px;
             left: 55px;
             z-index: 10;
             color: #fff;
             background: #555;
             padding: 16px;
             }
          
          /*--- flexbox ---*/
          #flexbox {
             display: -webkit-flex;
             display: -moz-flex;
             display: -ms-flex;
             display: -o-flex;
             display: flex;
             width: 95%;
             margin: 3rem auto;
             border: 1px dashed #ddd;
             }
          #flexbox .itm {
             width: 25%;
             height: auto;、	border: 1px solid #aaa;
             }
          #flexbox .title {
             position: -webkit-sticky;
             position: -moz-sticky;
             position: -ms-sticky;
             position: -o-sticky;
             position: sticky;
             top: 100px;
             background: #fff;
             font-size: 0.75rem;
             letter-spacing: -.4px;
             line-height: 1.5;
             text-align: center;
             border-bottom:1px solid #aaa;
             }
          #flexbox .title p:first-child {
             height: 4em;
             }
          #flexbox .title p:nth-child(2) {
             height: 4em;
             background: #ccc;
             border-top: 1px dotted #aaa;
             }
          #flexbox .title code {
             font-size: inherit;
             }
          #flexbox ol {
             display: block;
             margin: 0;
             }
          #flexbox ol li,
          #flexbox ol li a {
             background: #f6f4f2;
             font-size: 12px;
             letter-spacing: -.3px;
             line-height: 1.25;
             }
          #flexbox div:nth-of-type(3) {
             border-left: 3px solid #ccddff;
             }
          #flexbox li.ye {
             background: yellow;
             }

          JavaScript

          'use strict';
          
          var _ = console.log;
          
          var d1 = document.getElementById('d1'),
              d2 = document.getElementById('d2'),
              d3 = document.getElementById('d3'),
              d4 = document.getElementById('d4'),
              btn = document.getElementById('dStart');
          
          var drawingTimeAndModulo = function() {
              var frameStart = window.performance.now();
              var counter = 0;
              var modulo = function(a) {
                  return a % 2000;
              };
              var modulo2 = function(a) {
                  return a % 2000 / 4;
              };
              
              var id = window.requestAnimationFrame(function ani(loadStart) {
                  var duration = loadStart - frameStart;
                  
                  if (duration > 3000 ) {
                      cancelAnimationFrame(id);
                  } else if ( counter >= 0 && duration > (counter+1) * 1000 ) {
                      d1.insertAdjacentHTML('beforeend', '<li class="ye">'+ loadStart.toFixed(2) +'</li>');
                      d2.insertAdjacentHTML('beforeend', '<li class="ye">'+ duration +'</li>');
                      d3.insertAdjacentHTML('beforeend', '<li class="ye">'+ modulo(duration) +'</li>');
                      
                      counter++;
                      id = requestAnimationFrame(ani);
                  } else {
                      d1.insertAdjacentHTML('beforeend', '<li>'+ loadStart.toFixed(2) +'</li>');
                      d2.insertAdjacentHTML('beforeend', '<li>'+ duration +'</li>');
                      d3.insertAdjacentHTML('beforeend', '<li>'+ modulo(duration) +'</li>');
                      id = requestAnimationFrame(ani);
                  }
              });
              
              var id2 = window.requestAnimationFrame(function ani2(loadStart) {
                  var duration2 = loadStart - frameStart;
                  
                  d4.insertAdjacentHTML('beforeend', '<li>'+ modulo2(duration2) +'</li>');
                  if (duration2 > 3000 ) {
                      cancelAnimationFrame(id2);
                  } else {
                      id = requestAnimationFrame(ani2);
                  }
              });
          };
          
          btn.addEventListener('click', drawingTimeAndModulo);

          js binからソースコードのdownload や そのままオンライン編集・実行 もできます~🙌🌟

          JS Bin on jsbin.com

           

           

           

           

           

          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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️