- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
if (document.querySelector('.instruction-wrapper')) {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame
})();
}
var animator = {
stageArray: [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
[14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
],
// min:16,max:25,
element: document.querySelector('.instruction-wrapper'),
originalClassName: 'instruction-wrapper',
currentStage: 1,
currentStep: 0,
oldTime: new Date().getTime(),
timeStep: 1200,
addStateClass: 'state-', //+stateRange.currentStep
chaning: true,
repeat: true,
debug: true,
autoplay: true,
animate: function() {
requestAnimationFrame(animator.animate);
if (animator.autoplay) {
animator.draw();
}
},
classCheckUpdate: function(arg1) {
this.element.className = this.originalClassName;
for (var i = 0; i <= arg1; i++) {
this.element.classList.add(this.addStateClass + '' + i);
}
},
draw: function(arg) {
var time = new Date().getTime();
// console.log(time - oldTime);
if (time > this.oldTime + this.timeStep) {
if (this.debug) {
console.log(this.currentStep)
};
this.oldTime = time;
if (!arg && !!this.stageArray[this.currentStage][this.currentStep + 1]) {
console.log('instr-' + 1 + '_' + this.stageArray[this.currentStage][this.currentStep + 1]);
this.currentStep += 1;
this.classCheckUpdate(this.stageArray[this.currentStage][this.currentStep])
// this.element.classList.add(this.addStateClass + '' + this.stageArray[this.currentStage][this.currentStep]);
} else if (!arg && !this.stageArray[this.currentStage][this.currentStep + 1] && !!this.repeat) {
this.currentStep = 0;
console.log('instr-' + 2);
this.classCheckUpdate(this.stageArray[this.currentStage][this.currentStep])
// this.element.className = this.originalClassName;
// this.element.classList.add(this.addStateClass + '' + this.stageArray[this.currentStage][this.currentStep]);
} else if (!this.stageArray[this.currentStage][this.currentStep + 1] &&
!this.repeat &&
this.stageArray[this.currentStage + 1]) {
this.currentStage += 1;
console.log('instr-' + 3);
this.currentStep = this.stageArray[this.currentStage + 1][0];
} else if (arg > 1) {
console.log('instr-' + 4);
this.element.className = this.originalClassName;
for (var i = 0; i <= arg; i++) {
this.element.classList.add(this.addStateClass + '' + i);
this.element.classList.add(this.addStateClass + '' + this.stageArray[this.currentStage][this.currentStep]);
}
}
}
}
}
animator.animate();
}