3body.html

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/
css/font-awesome.min.css">
<script language="javascript">
  function isInternetExplorer() {
    ua = navigator.userAgent;
    /* MSIE used to detect old browsers and Trident used to newer ones*/
    return ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
  }

  /* Define the Animation class */
  function Animation(frames, img_id, slider_id, interval, loop_select_id){
    this.img_id = img_id;
    this.slider_id = slider_id;
    this.loop_select_id = loop_select_id;
    this.interval = interval;
    this.current_frame = 0;
    this.direction = 0;
    this.timer = null;
    this.frames = new Array(frames.length);

    for (var i=0; i<frames.length; i++)
    {
     this.frames[i] = new Image();
     this.frames[i].src = frames[i];
    }
    var slider = document.getElementById(this.slider_id);
    slider.max = this.frames.length - 1;
    if (isInternetExplorer()) {
        // switch from oninput to onchange because IE <= 11 does not conform
        // with W3C specification. It ignores oninput and onchange behaves
        // like oninput. In contrast, Mircosoft Edge behaves correctly.
        slider.setAttribute('onchange', slider.getAttribute('oninput'));
        slider.setAttribute('oninput', null);
    }
    this.set_frame(this.current_frame);
  }

  Animation.prototype.get_loop_state = function(){
    var button_group = document[this.loop_select_id].state;
    for (var i = 0; i < button_group.length; i++) {
        var button = button_group[i];
        if (button.checked) {
            return button.value;
        }
    }
    return undefined;
  }

  Animation.prototype.set_frame = function(frame){
    this.current_frame = frame;
    document.getElementById(this.img_id).src =
            this.frames[this.current_frame].src;
    document.getElementById(this.slider_id).value = this.current_frame;
  }

  Animation.prototype.next_frame = function()
  {
    this.set_frame(Math.min(this.frames.length - 1, this.current_frame + 1));
  }

  Animation.prototype.previous_frame = function()
  {
    this.set_frame(Math.max(0, this.current_frame - 1));
  }

  Animation.prototype.first_frame = function()
  {
    this.set_frame(0);
  }

  Animation.prototype.last_frame = function()
  {
    this.set_frame(this.frames.length - 1);
  }

  Animation.prototype.slower = function()
  {
    this.interval /= 0.7;
    if(this.direction > 0){this.play_animation();}
    else if(this.direction < 0){this.reverse_animation();}
  }

  Animation.prototype.faster = function()
  {
    this.interval *= 0.7;
    if(this.direction > 0){this.play_animation();}
    else if(this.direction < 0){this.reverse_animation();}
  }

  Animation.prototype.anim_step_forward = function()
  {
    this.current_frame += 1;
    if(this.current_frame < this.frames.length){
      this.set_frame(this.current_frame);
    }else{
      var loop_state = this.get_loop_state();
      if(loop_state == "loop"){
        this.first_frame();
      }else if(loop_state == "reflect"){
        this.last_frame();
        this.reverse_animation();
      }else{
        this.pause_animation();
        this.last_frame();
      }
    }
  }

  Animation.prototype.anim_step_reverse = function()
  {
    this.current_frame -= 1;
    if(this.current_frame >= 0){
      this.set_frame(this.current_frame);
    }else{
      var loop_state = this.get_loop_state();
      if(loop_state == "loop"){
        this.last_frame();
      }else if(loop_state == "reflect"){
        this.first_frame();
        this.play_animation();
      }else{
        this.pause_animation();
        this.first_frame();
      }
    }
  }

  Animation.prototype.pause_animation = function()
  {
    this.direction = 0;
    if (this.timer){
      clearInterval(this.timer);
      this.timer = null;
    }
  }

  Animation.prototype.play_animation = function()
  {
    this.pause_animation();
    this.direction = 1;
    var t = this;
    if (!this.timer) this.timer = setInterval(function() {
        t.anim_step_forward();
    }, this.interval);
  }

  Animation.prototype.reverse_animation = function()
  {
    this.pause_animation();
    this.direction = -1;
    var t = this;
    if (!this.timer) this.timer = setInterval(function() {
        t.anim_step_reverse();
    }, this.interval);
  }
</script>

<style>
.animation {
    display: inline-block;
    text-align: center;
}
input[type=range].anim-slider {
    width: 374px;
    margin-left: auto;
    margin-right: auto;
}
.anim-buttons {
    margin: 8px 0px;
}
.anim-buttons button {
    padding: 0;
    width: 36px;
}
.anim-state label {
    margin-right: 8px;
}
.anim-state input {
    margin: 0;
    vertical-align: middle;
}
</style>

<div class="animation">
  <img id="_anim_img4bc3dcc5fdce488c91f14c922435b724">
  <div class="anim-controls">
    <input id="_anim_slider4bc3dcc5fdce488c91f14c922435b724" type="range" class="anim-slider"
           name="points" min="0" max="1" step="1" value="0"
           oninput="anim4bc3dcc5fdce488c91f14c922435b724.set_frame(parseInt(this.value));"></input>
    <div class="anim-buttons">
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.slower()"><i class="fa fa-minus"></i></button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.first_frame()"><i class="fa fa-fast-backward">
          </i></button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.previous_frame()">
          <i class="fa fa-step-backward"></i></button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.reverse_animation()">
          <i class="fa fa-play fa-flip-horizontal"></i></button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.pause_animation()"><i class="fa fa-pause">
          </i></button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.play_animation()"><i class="fa fa-play"></i>
          </button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.next_frame()"><i class="fa fa-step-forward">
          </i></button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.last_frame()"><i class="fa fa-fast-forward">
          </i></button>
      <button onclick="anim4bc3dcc5fdce488c91f14c922435b724.faster()"><i class="fa fa-plus"></i></button>
    </div>
    <form action="#n" name="_anim_loop_select4bc3dcc5fdce488c91f14c922435b724" class="anim-state">
      <input type="radio" name="state" value="once" id="_anim_radio1_4bc3dcc5fdce488c91f14c922435b724"
             >
      <label for="_anim_radio1_4bc3dcc5fdce488c91f14c922435b724">Once</label>
      <input type="radio" name="state" value="loop" id="_anim_radio2_4bc3dcc5fdce488c91f14c922435b724"
             checked>
      <label for="_anim_radio2_4bc3dcc5fdce488c91f14c922435b724">Loop</label>
      <input type="radio" name="state" value="reflect" id="_anim_radio3_4bc3dcc5fdce488c91f14c922435b724"
             >
      <label for="_anim_radio3_4bc3dcc5fdce488c91f14c922435b724">Reflect</label>
    </form>
  </div>
</div>


<script language="javascript">
  /* Instantiate the Animation class. */
  /* The IDs given should match those used in the template above. */
  (function() {
    var img_id = "_anim_img4bc3dcc5fdce488c91f14c922435b724";
    var slider_id = "_anim_slider4bc3dcc5fdce488c91f14c922435b724";
    var loop_select_id = "_anim_loop_select4bc3dcc5fdce488c91f14c922435b724";
    var frames = new Array(200);
    
  for (var i=0; i<200; i++){
    frames[i] = "3body_frames/frame" + ("0000000" + i).slice(-7) +
                ".png";
  }


    /* set a timeout to make sure all the above elements are created before
       the object is initialized. */
    setTimeout(function() {
        anim4bc3dcc5fdce488c91f14c922435b724 = new Animation(frames, img_id, slider_id, 52.0,
                                 loop_select_id);
    }, 0);
  })()
</script>