| 원근감 있는 원형이동 | go to 레이어 원형으로 이동하기 |
이런 원근감있는 효과를 내기 위해서 각 레이어에 각도에 맞는 몇개의 이미지를 가지고 있는 레이어를 넣어주고 visibility를 visible과 hidden으로 각 레이어가 자신에 맞는 각도에 왔을 때 바꾸어 주면 이런 효과를 낼 수 있습니다.
앞의 예제 "원형이동 레이어 자동배치하기" 에서의 JavaScript코드에 약간의 수정을 하고 함수를 하나 추가합니다. 약간의 수정한 코드는 아래입니다.
function initCircleLoop() {
circleLayer = new Array();
if(n4) {
circleLayer[0] = 1 //각 레이어들의 이동 간격시간
circleLayer[1] = new circleLoopSet(document.D1, 5, 200, 50, 200, 200, 4, 1)
circleLayer[2] = new circleLoopSet(document.D2, 5, 200, 50, 200, 200, 4, 2)
circleLayer[3] = new circleLoopSet(document.D3, 5, 200, 50, 200, 200, 4, 3)
circleLayer[4] = new circleLoopSet(document.D4, 5, 200, 50, 200, 200, 4, 4)
}
else if(e4) {
circleLayer[0] = 1 //각 레이어들의 이동 간격시간
circleLayer[1] = new circleLoopSet(document.all.D1, 5, 200, 50, 200, 200, 4, 1)
circleLayer[2] = new circleLoopSet(document.all.D2, 5, 200, 50, 200, 200, 4, 2)
circleLayer[3] = new circleLoopSet(document.all.D3, 5, 200, 50, 200, 200, 4, 3)
circleLayer[4] = new circleLoopSet(document.all.D4, 5, 200, 50, 200, 200, 4, 4)
}
}
처음 레이어 원형정보를 설정할 때 ie4에서 레이어의 이름을 참조하기 위해서 위의 굵은 글자처럼 .style을 빼주어야 합니다.
function moveCircleLoop() {
for(var i=1; i < circleLayer.length; i++) {
if(n4) {
circleLayer[i].layer.left = circleLayer[i].centerX + circleLayer[i].moveHol * Math.cos(circleLayer[i].moveAngle*Math.PI/180)
circleLayer[i].layer.top = circleLayer[i].centerY + circleLayer[i].moveVer * Math.sin(circleLayer[i].moveAngle*Math.PI/180)
}
else if(e4) {
circleLayer[i].layer.style.pixelLeft = circleLayer[i].centerX + circleLayer[i].moveHol * Math.cos(circleLayer[i].moveAngle*Math.PI/180)
circleLayer[i].layer.style.pixelTop = circleLayer[i].centerY + circleLayer[i].moveVer * Math.sin(circleLayer[i].moveAngle*Math.PI/180)
}
distanceShow(circleLayer[i]) //원근감을 주기위함.
circleLayer[i].moveAngle += circleLayer[i].moveAngleIns
}
moveCircleLoop_ID = setTimeout("clearTimeout(moveCircleLoop_ID); moveCircleLoop()", circleLayer[0]);
}
레이어를 이동시키는 moveCircleLoop() 함수에서 수정한 코드는 원근감을 내게하는 함수 distanceShow(circleLayer[i])를
넣어주고 처음 레이어 정보를 구성할 때 ie4에서 document.all.레이어이름 으로 지정을 했으므로
pixelLeft, pixelTop 을 지정하기 위해서 style 지정해 줍니다.
distanceShow(circleLayer[i])는 현재의 레이어가 어느 각도에 있는지 판단하여 자신이 가지고 있는 레이어들 중에서 알맞은 크기의 이미지를 가지고 있는 레이어에게 visibility=visible로 그 이미지를 보이게 합니다. 이것을 하기 위해서 4개의 레이어에게 각각의 이미지를 가지고 있는 레이어를 넣어주어야 합니다. 아래가 레이어들입니다.
<div id="D1"> <div id="D16"><img src="../../../images/light.gif" width=100 height=100 border=0></div> <div id="D15"><img src="../../../images/light.gif" width=80 height=80 border=0></div> <div id="D14"><img src="../../../images/light.gif" width=60 height=60 border=0></div> <div id="D13"><img src="../../../images/light.gif" width=40 height=40 border=0></div> <div id="D12"><img src="../../../images/light.gif" width=20 height=20 border=0></div> <div id="D11"><img src="../../../images/light.gif" width=10 height=10 border=0></div> </div> <div id="D2"> <div id="D26"><img src="../../../images/light3.gif" width=100 height=100 border=0></div> <div id="D25"><img src="../../../images/light3.gif" width=80 height=80 border=0></div> <div id="D24"><img src="../../../images/light3.gif" width=60 height=60 border=0></div> <div id="D23"><img src="../../../images/light3.gif" width=40 height=40 border=0></div> <div id="D22"><img src="../../../images/light3.gif" width=20 height=20 border=0></div> <div id="D21"><img src="../../../images/light3.gif" width=10 height=10 border=0></div> </div> <div id="D3"> <div id="D36"><img src="../../../images/light2.gif" width=100 height=100 border=0></div> <div id="D35"><img src="../../../images/light2.gif" width=80 height=80 border=0></div> <div id="D34"><img src="../../../images/light2.gif" width=60 height=60 border=0></div> <div id="D33"><img src="../../../images/light2.gif" width=40 height=40 border=0></div> <div id="D32"><img src="../../../images/light2.gif" width=20 height=20 border=0></div> <div id="D31"><img src="../../../images/light2.gif" width=10 height=10 border=0></div> </div> <div id="D4"> <div id="D46"><img src="../../../images/light3.gif" width=100 height=100 border=0></div> <div id="D45"><img src="../../../images/light3.gif" width=80 height=80 border=0></div> <div id="D44"><img src="../../../images/light3.gif" width=60 height=60 border=0></div> <div id="D43"><img src="../../../images/light3.gif" width=40 height=40 border=0></div> <div id="D42"><img src="../../../images/light3.gif" width=20 height=20 border=0></div> <div id="D41"><img src="../../../images/light3.gif" width=10 height=10 border=0></div> </div>4개의 레이어는 원형으로 이동하는 레이어입니다. 원근감을 내기 위해서 각도에 맞는 이미지를 보여주기 위해 이미지를 가진 6개의 레이어를 가지고 있습니다. 여기서는 같은 이미지를 사용했습니다. 같은 이미지에 width, height로 크기만 바꾸어서 지정했습니다. 다른 이미지를 사용할 수도 있습니다. 중요한 것은 원근감을 내기 위한 크기입니다.
여기서 원근감으로 사용할 레이어의 이름이 중요합니다. nn4는 레이어가 가지고 있는 레이어는 레이어.document.layers[숫자] 로 알 수 있지만. ie4는 이 방법이 안됩니다. 내부에 포함된 레이어도 상위와 같은 document.all.레이어이름 이기 때문에 쉽게 인식할 수 있는 이름을 지정하는 것이 많은 경우에 효과적이고 여기서도 마찬가지입니다. document.all.tags("div")로 페이지에 있는 모든 레이어들을 배열로 접근할 수 있지만, 복잡해지고 다음에 div를 하나 추가하거나 삭제하면 오작동합니다. 그래서, nn4, ie4에서 다 사용하기 위해서는 상위레이어와 하위레이어의 이름을 상위와 하위가 서로 비슷한 이름을 지정하는 것이 JavaScript 로 제어할 때 편리합니다.
그리고 지정한 style입니다.
<style>
#D1 { position:absolute; left:100; top:100; width:100; }
#D16 { position:absolute; left:0; top:0; width:50; visibility:hidden;}
#D15 { position:absolute; left:10; top:10; width:30; visibility:hidden;}
#D14 { position:absolute; left:20; top:20; width:30; visibility:hidden;}
#D13 { position:absolute; left:30; top:30; width:30; visibility:hidden;}
#D12 { position:absolute; left:40; top:40; width:30; visibility:hidden;}
#D11 { position:absolute; left:45; top:45; width:20; visibility:hidden;}
#D2 { position:absolute; left:200; top:100; width:100; }
#D26 { position:absolute; left:0; top:0; width:30; visibility:hidden;}
#D25 { position:absolute; left:10; top:10; width:30; visibility:hidden;}
#D24 { position:absolute; left:20; top:20; width:30; visibility:hidden;}
#D23 { position:absolute; left:30; top:30; width:30; visibility:hidden;}
#D22 { position:absolute; left:40; top:40; width:30; visibility:hidden;}
#D21 { position:absolute; left:45; top:45; width:20; visibility:hidden;}
#D3 { position:absolute; left:300; top:100; width:100; }
#D36 { position:absolute; left:0; top:0; width:30; visibility:hidden;}
#D35 { position:absolute; left:10; top:10; width:30; visibility:hidden; }
#D34 { position:absolute; left:20; top:20; width:30; visibility:hidden; }
#D33 { position:absolute; left:30; top:30; width:30; visibility:hidden; }
#D32 { position:absolute; left:40; top:40; width:30; visibility:hidden; }
#D31 { position:absolute; left:45; top:45; width:20; visibility:hidden; }
#D4 { position:absolute; left:400; top:100; width:100; }
#D46 { position:absolute; left:0; top:0; width:30; visibility:hidden;}
#D45 { position:absolute; left:10; top:10; width:30; visibility:hidden; }
#D44 { position:absolute; left:20; top:20; width:30; visibility:hidden; }
#D43 { position:absolute; left:30; top:30; width:30; visibility:hidden; }
#D42 { position:absolute; left:40; top:40; width:30; visibility:hidden; }
#D41 { position:absolute; left:45; top:45; width:20; visibility:hidden; }
</style>
여기서는 상위레이어의 위치는 어디라도 상관이 없습니다. 하지만, 하위레이어들의 위치는 잘 조정을 해야합니다.
작은 크기의 이미지를 가지고 있는 레이어는 보다 큰 이미지를 가지고 있는 레이어의 중앙에 오게하는 것이
visibility를 바꾸어 주었을 때, 가장 정확하게 보입니다. 그렇지 않으면 좀 왔다갔다 하게 보입니다. 좀 떨려 보입니다.
사용할 이미지의 크기와 위치가 중앙에 오게하면 됩니다. 그리고 처음에는 모두 visibility:hidden으로 지정을 합니다.
이제 이들 html로 위의 수정한 함수 distanceShow()를 넣어줍니다.
function distanceShow(ang) {
var anglePos = ang.moveAngle%360
if(anglePos < 0) { anglePos *= -1; anglePos += 180; anglePos %= 360; }
// angleIns의 값이 음수라서 반시계 방향으로 도는 레이어를 위해.
if(n4) {
var obj = ang.layer.document.layers
if( anglePos < 30 ) { obj[4].visibility="hidden"; obj[3].visibility="visible";}
else if( anglePos < 45 ) { obj[3].visibility="hidden"; obj[2].visibility="visible";}
else if( anglePos < 60 ) { obj[2].visibility="hidden"; obj[1].visibility="visible";}
else if( anglePos < 120 ) { obj[1].visibility="hidden"; obj[0].visibility="visible";}
else if( anglePos < 135 ) { obj[0].visibility="hidden"; obj[1].visibility="visible";}
else if( anglePos < 150 ) { obj[1].visibility="hidden"; obj[2].visibility="visible";}
else if( anglePos < 180 ) { obj[2].visibility="hidden"; obj[3].visibility="visible";}
else if( anglePos < 225 ) { obj[3].visibility="hidden"; obj[4].visibility="visible";}
else if( anglePos < 315 ) { obj[4].visibility="hidden"; obj[5].visibility="visible";}
else if( anglePos < 360 ) { obj[5].visibility="hidden"; obj[4].visibility="visible";}
}
else if(e4) {
if( anglePos < 30 ) { document.all[ang.layer.id+2].style.visibility="hidden"; document.all[ang.layer.id+3].style.visibility="visible";}
else if( anglePos < 45 ) { document.all[ang.layer.id+3].style.visibility="hidden"; document.all[ang.layer.id+4].style.visibility="visible";}
else if( anglePos < 60 ) { document.all[ang.layer.id+4].style.visibility="hidden"; document.all[ang.layer.id+5].style.visibility="visible";}
else if( anglePos < 120 ) { document.all[ang.layer.id+5].style.visibility="hidden"; document.all[ang.layer.id+6].style.visibility="visible";}
else if( anglePos < 135 ) { document.all[ang.layer.id+6].style.visibility="hidden"; document.all[ang.layer.id+5].style.visibility="visible";}
else if( anglePos < 150 ) { document.all[ang.layer.id+5].style.visibility="hidden"; document.all[ang.layer.id+4].style.visibility="visible";}
else if( anglePos < 180 ) { document.all[ang.layer.id+4].style.visibility="hidden"; document.all[ang.layer.id+3].style.visibility="visible";}
else if( anglePos < 225 ) { document.all[ang.layer.id+3].style.visibility="hidden"; document.all[ang.layer.id+2].style.visibility="visible";}
else if( anglePos < 315 ) { document.all[ang.layer.id+2].style.visibility="hidden"; document.all[ang.layer.id+1].style.visibility="visible";}
else if( anglePos < 360 ) { document.all[ang.layer.id+1].style.visibility="hidden"; document.all[ang.layer.id+2].style.visibility="visible";}
}
}
레이어를 이동하는 함수 moveCircleLoop() 안에 있는 distanceShow(circleLayer[i])함수 입니다. circleLayer[i]는
각 상위의 레이어를 가리킵니다. D1, D2, D3, D4를 말합니다.
if(anglePos < 0) { anglePos *= -1; anglePos += 180; anglePos %= 360; } 는
반대 방향으로 도는 레이어는 moveAngle의 값이 음수가 되는데 위의 식으로 하니 각도를 양수와 같게 참조할 수
있습니다.
이 각도에 따른 이미지 바꿈으로 선풍기나 전기톱날같은 회전하는 것을 만들 수 있습니다.
그래픽만 잘하면 말이죠..
탱크요? 예 할 수 있어요.. 윽~ casino? :)
--
여기서 사용한 여러코드는 순전히 발견했습니다. 될때까지 막해보다가 되더군요.
덕분에 수학공부는 조금 했지만요.. 이런것 처럼 수학을 잘 이해하고 있다면
이것보다 더 멋진 레이어이동을 할 수 있을겁니다. 드디어 수학공부할 때가 되었습니다. 흑..