Animation - Spinning Disk

We can create a simple animation using a timed loop that is generated by making a call to the setInterval() function. The setInterval() function is called with a function and a time passed in as parameters. The function that is passed in is the function that setInterval() will call after every time milliseconds.

In the example code below, we have a JavaScript class called CAnimation. The constructor takes a filename, width, height, frame count, and time in milliseconds. The filename is a base name that will be used. The actual files will have the same name with frame index inserted before the extension. For example, the name that we use, "Ring.png" generates the names "Ring1.png" through "Ring8.png" and uses these strings to access the image files for the animation.The width and height are set to the size of the image. However, they can be set to any value if it is desirable to resize the images. The frame count is the number of number images used in the animation. The time in milliseconds is duration between animation frames.

The Update() function is called for every time-interval and calls SwapFrames() on the animation object to change the image frames.

CSpinningDisk.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript Spinning Ring Animation</title>
  <script type="text/javascript" src="CSpinningDisk.js"></script>
</head>
<body>
</body>
</html>

CSpinningDisk.js

var qAnimation = null;

function Initialize() {
  qAnimation = new CAnimation("Ring.png", 200, 200, 10, 150);
  var qpBody = document.getElementsByTagName("body")[0];
  qAnimation.Place(qpBody, 10, 20);
  qAnimation.StartAnimation();
}

function Update() {
  qAnimation.SwapFrames();
}

function CAnimation(sFileName, iWidth, iHeight, iFrameCount, iMSPerFrame) {
  this.mqpDivConainer = document.createElement('div');
  this.mqpDivConainer.style.width = iWidth + 'px';
  this.mqpDivConainer.style.height = iHeight + 'px';
  this.mqpDivConainer.style.position = 'absolute';
  this.mqaImages = new Array(iFrameCount);
  for (var i = 0; i < iFrameCount; ++i) {
    // Find the dot before the extension and stick a number in front of it.
    var qDotPos = sFileName.lastIndexOf(".");
    var sFrameFileName = sFileName.substring(0, qDotPos) + (i + 1) + sFileName.substring(qDotPos);
    this.mqaImages[i] = document.createElement('img');
    this.mqaImages[i].src = sFrameFileName;
    this.mqaImages[i].style.width = iWidth + 'px';
    this.mqaImages[i].style.height = iHeight + 'px';
    this.mqaImages[i].style.position = 'absolute';
    this.mqaImages[i].style.left = '0px';
    this.mqaImages[i].style.top = '0px';
    this.mqaImages[i].style.display = 'none';
    this.mqpDivConainer.appendChild(this.mqaImages[i]);
  }
  this.miCurrFrame = 0;
  this.mqaImages[this.miCurrFrame].style.display = 'block';
  this.miFrameCount = iFrameCount;
  this.miMSPerFrame = iMSPerFrame;

  this.SwapFrames = function () {
    this.mqaImages[this.miCurrFrame].style.display = 'none';
    this.miCurrFrame = (this.miCurrFrame + 1) % this.miFrameCount;
    this.mqaImages[this.miCurrFrame].style.display = 'block';
  }
  this.StartAnimation = function() {
    this.miTimerId = setInterval(Update, this.miMSPerFrame);
  }
  this.StopAnimation = function() {
    clearInterval(this.miTimerId);
  }
  this.Place = function(qParent, iLeft, iTop) {
    qParent.appendChild(this.mqpDivConainer);
    this.mqpDivConainer.style.left = iLeft + 'px';
    this.mqpDivConainer.style.top = iTop + 'px';
  }
}

window.onload = Initialize;

Core JavaScript

Animation - Spinning Disk

CSpinningDisk.html

CSpinningDisk.js

Output