two-state-icons_05_script-2.js

TransitionIcon.prototype.triggerAnimation = function(timestamp) {
  var progress = this.getProgress(timestamp);
  this.animateIcon(progress);
  this.checkProgress(progress);
};

TransitionIcon.prototype.getProgress = function(timestamp) {
  //make sure the progress value is in the right interval
  if (!this.time.start) this.time.start = timestamp;
  return timestamp - this.time.start;
};

TransitionIcon.prototype.checkProgress = function(progress) {
  //check if animation is complete
  var self = this;
  if (this.time.total > progress) {
    //animation is not over -> start new animation loop
    window.requestAnimationFrame(self.triggerAnimation.bind(self));
  } else {
    //animation is over -> update object properties + group aria attributes
    this.status = {interacted : !this.status.interacted, animating : false};
    this.time.start= null;
    var index = getStatusIndex(this.status.interacted);
    this.states[index[0]].removeAttribute('aria-hidden');
    this.states[index[1]].setAttribute('aria-hidden', 'true');
  }
};

TransitionIcon.prototype.animateIcon = function(progress) {
  if(progress > this.time.total) progress = this.time.total;
  if(0 > progress) progress = 0;
  var index = getStatusIndex(this.status.interacted);
  //update group visibility
  this.states[index[0]].style.display = (progress > this.time.total/2) ? "none" : "block";
  this.states[index[1]].style.display = (progress > this.time.total/2) ? "block" : "none";
  //scale group elements
  this.scaleIcon(progress, index[0], index[1]);
}

TransitionIcon.prototype.scaleIcon = function(progress, i, j) {
  var scale1 = ncEaseInOutQuart(Math.min(progress, this.time.total/2), 1, -0.2, this.time.total/2).toFixed(2),
      scale2 = ncEaseInOutQuart(Math.max(progress - this.time.total/2, 0), 0.2, -0.2, this.time.total/2).toFixed(2);
  this.states[i].setAttribute('transform', 'translate('+this.size.width*(1 - scale1)/2+' '+this.size.height*(1 - scale1)/2+') scale('+ scale1 +')');
  this.states[j].setAttribute('transform', 'translate('+this.size.width*scale2/2+' '+this.size.height*scale2/2+') scale('+ (1 - scale2) +')');
};