アニメーション処理を考える - babu_babu

普通ならきっと…。

<!DOCTYPE html>
<title>TEST</title>
<meta charset="UTF-8">

<style>
ol {
  list-style: none;
  margin    : 0;
  padding   : 0;
}
li {
  margin    : 0;
  padding   : 0;
}

#inv3 {
  position: absolute;
}
</style>

<h1>アニメーション</h1>
<ol>
  <li>
    <ol>
      <li>
        <img id ="inv3"
             alt="インベーダ"
             width="12"
             height="8"
             src="data:image/gif;base64,R0lGODlhDAAIAIAAAP///wAAACwAAAAADAAIAAACEoQRGWfqip6Esc1pV9S1p85YBQA7"
        >
    </ol>
</ol>


<script type="application/javascript; version=1.8">

(function(){
  var win = this;
  if ('undefined' === typeof this.requestAnimationFrame) {
    this.requestAnimationFrame =
      this.requestAnimationFrame ||
      this.webkitRequestAnimationFrame||
      this.mozRequestAnimationFrame   ||
      this.oRequestAnimationFrame     ||
      this.msRequestAnimationFrame    ||
      function (callback, that) {
        var tmpFunc = function () {
          var timestamp = +(new Date); //(new Date).getTime ();
          callback (timestamp); //callback.call (that, timestamp);
        };
        win.setTimeout (tmpFunc, Math.floor (1000/60));
      };
  }
}).call (window);


var d = document.getElementById ('inv3');
      
var start = ('undefined' === typeof window.mozAnimationStartTime)
            ? (new Date).getTime ()
            : window.mozAnimationStartTime;


function step (timestamp) {
  var progress = timestamp - start;  
  d.style.left = Math.min (progress/5, 800) + "px";  

  if (progress < 3000) {
    requestAnimationFrame (step);  
  }
}


requestAnimationFrame (step);  

</script>

例えば 800px の距離を 3000ms と指定したらだいたい 3 秒でアニメーションが完了するような、コントローラを作ってみる

思案中…