Javascript animation

참고: http://www.w3schools.com/js/js_timing.asp

Animation 은 일정한 시간 간격으로 객체의 속성 등을 서서히 변화시키는 일이다.

일정한 시간 간격으로 원하는 작업을 하기 위해 setTimeout 함수를 이용한다.
setTimeout(function, delay);

예) 1초 마다 i 변수에 1을 더하고 표시한다.

<div id="value"></div>
<script type="text/javascript">
var i = 0;
var func = function() {
 i++;
 document.getElementById("value");
 setTimeout(func, 1000);
}
setTimeout(func, 1000);
</script>

Animation 객체

<script type="text/javascript">
function myanim(actionFunc, interval) {
 this.timer;
 this.interval = (interval != null) ? interval : 1000;
 this.actionFunc = actionFunc;
}
myanim.prototype.start = function() {
 this.stop();
 var me = this;
 if (this.actionFunc) {
  this.loop = function() {me.actionFunc();setTimeout(me.loop, me.interval);}
  this.loop();
 }
}
myanim.prototype.stop = function() {
 if (this.timer) clearTimeout(this.timer);
}
</script>

Animation 객체 사용하기

<div id="value2"></div>
<script type="text/javascript">
var j = 0;
var anim = new myanim(function(){j++;document.getElementById("value2").innerHTML=j;}, 1000);
</script>

Element 이동
div 객체의 위치 속성 값을 바꾼다.
1. div 준비

<div id="box1" style="position:absolute;width:100px;height:100px;border:solid 1px black"></div>

2. animation

<script type="text/javascript">
var x = 0;
var anim = new myanim(function(){
 x=(x+1)%100;
 document.getElementById("box1").style.left=x + "px";
}, 50);
</script>