アニメーション、その２。 - 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));
      };
  }
  
  //_____________
  
  var ToAnimate = new Function;
  
  ToAnimate.create = 
    (function (callBackFunction, operatingTime) {

      if (1 > arguments.length)
        throw new Error ('Invalid argument.');
      if ('function' !== typeof callBackFunction)
        throw new Error ('Not function.');
      if ('undefined' === typeof operatingTime)
        operatingTime = -1; //無限に
      
      return {
        state : null,
        
        start :
          (function (opTime_) {
            if (this.state)
              return;
            
            this.state = true;
            
            if (! isNaN (opTime_))
              operatingTime = opTime_;
            
            var now = (new Date).getTime ();
            var AnimationEndTime = operatingTime + now;
            
            (function cb (timeStamp) {
              var opTime = AnimationEndTime - timeStamp;
              if (0 <= opTime) {
                callBackFunction (opTime);
                requestAnimationFrame (cb);
              }
            }) (now);
          }),
        
        stop :
          (function () {
            this.state = false;
          })
      };
    });
  
  //_____________
  
  this.ToAnimate = ToAnimate;
  
  
}).call (window);

var s = document.getElementById ('inv3').style;

function inv (time) {
  s.left = Math.min (time / 5, 800) + "px";  
}

var anime = ToAnimate.create (inv, 3000)
anime.start ();


</script>