Firejune

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);