레이어 원형으로 이동시키기

레이어 원형으로 이동하기

레이어를 원형으로 이동시키기 위해서는 특정 좌표에서 특정 각도를 left에는 Math.cos(각도) 를 top에는 Math.sin(각도) 값을 더해주고 이 각도값을 바꾸어 주면 각도에 맞는 좌표값을 갱신합니다. 여기서 한 좌표를 기준으로 원형으로 이동시키기 위해서 중심점을 잡아야 합니다. 중심점은 레이어에서 left와 top의 이동폭에 위치시킬 각도를 지정합니다. 그리고 이 각도를 바꾸어 주면 레이어가 바뀐 각도만큼 이동합니다.

<DIV ID="D1" STYLE="position:absolute; left:200; top:200; width:50;">
   <IMG SRC="../../../images/img1.gif" WIDTH=50 HEIGHT=50 BORDER=0>
</DIV>

위에 움직이고 있는 레이어입니다.

function init() {
  if(n4) circleLayer = new circleMoveSet(document.D1, 180, 100, 100)
  else if(e4) circleLayer = new circleMoveSet(document.all.D1, 180, 100, 100)
  moveCircle(); 
}

body의 onLoad="init()"로 레이어를 원형으로 이동시킬 정보를 circleLayer에게 지정을 합니다. 180은 초기 각도이고 100, 100은 left와 top으로 움직일 이동폭의 절반값입니다.

function circleMoveSet(layer, angle, hol, ver) { 

  this.layer = layer
  this.moveAngle = angle
  this.moveHol = hol
  this.moveVer = ver

  if(n4) {
    this.centerX = layer.left - hol * Math.cos(angle*Math.PI/180)
    this.centerY = layer.top - ver * Math.sin(angle*Math.PI/180)
  }
  else if(e4) {
    this.centerX = layer.style.pixelLeft - hol * Math.cos(angle*Math.PI/180)
    this.centerY = layer.style.pixelTop - ver * Math.sin(angle*Math.PI/180)
  }
}

초기각도를 180으로 지정을 했습니다. 특정 각도에 따른 left의 값은 Math.cos(각도*Math.PI/180) 으로 알 수 있습니다. 각도가 180이면 Math.cos(180*Math.PI/180)은 -1이고 Math.cos(90*Math.PI/180)은 0입니다.

위의 표는 cosine 그래프입니다. 각도에 다른 left의 값이 1에서 -1까지의 값을 가집니다. 마찬가지로 Math.sin(각도*Math.PI/180)는 각도에 따른 top의 값을 가집니다. sine 그래프입니다.

Math.sin(180*Math.PI/180)은 0입니다. 그래서 this.centerX의 값은 300이고 this.centerX는 100입니다. left가 200, top이 100인 좌표의 레이어가 초기각도 180에서 원형으로 이동할 중심위치는 300, 100입니다. 각도를 90으로 주면 중심위치는 200, 0 이 됩니다.

처음 지정하는 초기각도는 이동할 레이어의 중심점을 잡는데 사용합니다. 레이어를 이동하는 방향은 moveAngle이 역활을 합니다. 이 중심점에서 moveAngle에 지정된 각도에서 moveAngle에게 각도를 줄여주면 중심점을 기준으로 moveAngle 각도에서 cosine과 sine 그래프의 빨강색에서 왼쪽으로 sin, cos 값이 되고 반대로 늘여주면 오른쪽으로의 값이 지정됩니다.

function moveCircle() {

  if(n4) {
    circleLayer.layer.left = circleLayer.centerX + circleLayer.moveHol * Math.cos(circleLayer.moveAngle*Math.PI/180)
    circleLayer.layer.top = circleLayer.centerY + circleLayer.moveVer * Math.sin(circleLayer.moveAngle*Math.PI/180)
  }
  else if(e4) {
    circleLayer.layer.style.pixelLeft = circleLayer.centerX + circleLayer.moveHol * Math.cos(circleLayer.moveAngle*Math.PI/180)
    circleLayer.layer.style.pixelTop = circleLayer.centerY + circleLayer.moveVer * Math.sin(circleLayer.moveAngle*Math.PI/180)
  }
  circleLayer.moveAngle += 2
  setTimeout("moveCircle()", 1)
}

각도를 2도씩 증가시켜서 원형으로 레이어를 이동시킵니다. 위의 그래프에서 180도에서 각도를 증가시키면 빨간색의 그래프 곡선과 같이 left, top의 값이 변화합니다. 360 이나 -360 이 넘으면 0이 됩니다. 무한대로 각도를 늘이거나 줄여도 항상 0에서 360 까지의 각도 값이 됩니다.

circleLayer.moveAngle -= 2 로 각도를 줄여주면 레이어의 이동방향은 반대가 됩니다. 여기서는 시계방향으로 레이어가 돌게 각도를 증가 시켰습니다. 반시계방향으로 돌게 만들려면 각도를 줄여주면 됩니다.

위의 코드를 사용한 레이어 위치에 따른 각도는 중심좌표에서 사분면으로 나누면 시계방향으로의 각도가 됩니다.

레이어가 90과 180 사이에 있다면 circleLayer.moveAngle%360은 90과 180사이의 값을 가지고 있습니다.

이 페이지의 방법은 이동시킬 레이어를 처음 위치 시킬때 일일이 계산을 하여 지정을 해야하고, 레이어가 여러개라면 더 복잡한 계산과 시험을 해봐야 합니다. 그리고 원형으로 이동하고 있는 레이어에 중심값을 바꾸거나 원형 이동방향등 다른 작업을 할 수 없습니다.

다음은 처음 좌표값을 신경쓰지 않고 원형으로 이동시킬 레이어를 배치하는 방법입니다.

원형이동 레이어 자동배치하기

TOP