Joonas Lehtinen씨는 플래시나 SVG, Canvas를 사용하지 않고 생짜 자바스크립트만으로 3D스타일 애니메이션을 만들었습니다. 3D로 사용할 이미지를 너비 1픽셀씩 순차적으로 잘라내고 384개 이미지 태그를 HTML에 마크업한 후, 몇몇 수학 계산식이 사용 된 아래와 같은 함수를 지속적으로 호출하여 좌측 그림처럼 나타나는 회전목마 애니메이션을 태스트 했습니다. CPU 자원을 엄청나게 차지하네요. 정말 이렇게까지 해야하나요?
// Draw a frame
function draw(x) {
var prevx=0;
for (i=0;i<384;i++) {
var rad = i*3.14/384;
var nextx = Math.round((1-Math.cos(rad))*180);
var h=Math.round(40+50*Math.sin(rad));
var s = document.getElementById("slice-"+((i+x*2)%384));
s.height=h;
var w = Math.round(nextx-prevx);
if (w==0) {
s.style.display="none";
} else {
s.style.display="block";
s.width= w;
s.style.top=""+(50-Math.round(h/1.5))+"px";
s.style.left=""+(prevx)+"px";
}
prevx=nextx;
}
}
// Animate the images
var frame=0;
function animate() {
draw(frame++);
setTimeout("animate()",1);
}
// Initialize the image slices
for (i=0;i<384;i++) {
var s = document.getElementById("slice-"+i);
s.style.position="absolute";
s.style.display="none";
}
animate();
덧, 아이쿠, John Dyer씨 또한 픽셀단위 div컬럼을 사용하여 3D 파노라마까지 구현하셨네요. Prototype기반으로 클래스화 된 코드를 작성하여 손쉽게 인스턴스를 생성하는 구조입니다.(다행히도 픽셀 단위로 이미지를 클리핑하지는 않았군요.) 보다 빠른 브라우저의 인터프리터 및 그래픽 처리능력이 절실합니다.
var pano = new JsPano('Courtyard',1240,300,350,300,5);
자바스크립트로 구현한 노가다 3D 애니메이션 - Firejune Blog
