애니메이트 가이드

이 화면은 애니메이트 컴포넌트 샘플화면이다.

애니메이트 컴포넌트를 이용하면 다른 컴포넌트들에 확대, 축소 혹은 이동시키는 효과를 줄 수 있다.

애니메이트 관련 속성으로 effect_type, effect_interval, effect_duration이 있다.

애니메이트 관련 API로 additem, deleteitem, play, stop, pause가 있다.

템플릿 위치: /HTML5/COMPONENT/ANIMATE/animate_basic

템플릿 파일

function playAnimate(index_image)
{
	var i, target_rect, txt_width, txt_height, txt_x, txt_y, image_length, arr_image, size_delta;

	// 변경할 사이즈
	size_delta = 24;

	// 배열에 이미지 객체 추가
	arr_image = [];
	arr_image.push(this.img_0);
	arr_image.push(this.img_1);
	arr_image.push(this.img_2);
	arr_image.push(this.img_3);
	arr_image.push(this.img_4);

	// 추가할 이미지 객체의 개수 구하기
	image_length = arr_image.length;

	// 이미지 객체 위치 및 텍스트 사이즈 구하기
	target_rect = arr_image[index_image].getrect();
	txt_width = this.txt.getwidth();
	txt_height = this.txt.getheight();

	// 텍스트와 이미지간의 간격 지정
	txt_x = target_rect[0];
	txt_y = target_rect[1] - (this.img_0.gettop - this.animate.gettop());

	// 텍스트 위치 이동 및 값 변경
	this.txt.setrect(txt_x, txt_y, txt_x + txt_width, txt_y + txt_height);
	this.txt.settext(arr_image[index_image].getdescription());

	// 포커스가 있는 이미지의 이전 이전 이미지들에 대해서 위치 조절
	for (i = 0; i < index_image - 1; i++) {
		// 아이템 추가
		// 1번째 파라미터: 변경시킬 이미지 객체
		// 2번째 파라미터: 변경시킬 x값
		// 3번째 파라미터: 변경시킬 y값
		// 4번째 파라미터: 변경시킬 width값
		// 5번째 파라미터: 변경시킬 height값
		this.animate.additem(arr_image[i], -size_delta * 2, 0, 0, 0);
	}

	// 포커스가 있는 이미지의 이전 이미지에 대해서 위치 조절
	if (index_image > 0) {
		this.animate.additem(arr_image[index_image - 1], -size_delta * 2, -size_delta, size_delta, size_delta);
	}

	// 텍스트 위치 조절
	this.animate.additem(this.txt, 0, -size_delta * 2, 0, 0);

	// 포커스가 있는 이미지에 대해서 위치 조절
	this.animate.additem(arr_image[index_image], -size_delta, -size_delta * 2, size_delta * 2, size_delta * 2);

	// 포커스가 있는 이미지의 이후 이미지 대해서 위치 조절
	if (index_image + 1 < image_length) {
		this.animate.additem(arr_image[index_image + 1], size_delta, -size_delta, size_delta, size_delta);
	}

	// 포커스가 있는 이미지의 이후 이후 이미지들에 대해서 위치 조절
	for (i = index_image + 2; i < image_length; i++) {
		this.animate.additem(arr_image[i], size_delta * 2, 0, 0, 0);
	}

	// 효과 시작
	this.animate.play();
}

function img_0_on_mousein(objInst)
{
	// 0번째 이미지 컴포넌트에 효과 시작
	this.playAnimate(0);
}

function img_0_on_mouseout(objInst)
{
	// 효과 중지
	this.animate.stop();
}

function img_1_on_mousein(objInst)
{
	// 1번째 이미지 컴포넌트에 효과 시작
	this.playAnimate(1);
}

function img_1_on_mouseout(objInst)
{
	// 효과 중지
	this.animate.stop();
}

function img_2_on_mousein(objInst)
{
	// 2번째 이미지 컴포넌트에 효과 시작
	this.playAnimate(2);
}

function img_2_on_mouseout(objInst)
{
	// 효과 중지
	this.animate.stop();
}

function img_3_on_mousein(objInst)
{
	// 3번째 이미지 컴포넌트에 효과 시작
	this.playAnimate(3);
}

function img_3_on_mouseout(objInst)
{
	// 효과 중지
	this.animate.stop();
}

function img_4_on_mousein(objInst)
{
	// 4번째 이미지 컴포넌트에 효과 시작
	this.playAnimate(4);
}

function img_4_on_mouseout(objInst)
{
	// 효과 중지
	this.animate.stop();
}

function btn_apply_on_mouseup(objInst)
{
	// effect_interval, effect_duration, effect_type 변경
	this.animate.seteffectinterval(this.fldInterval.gettext());
	this.animate.seteffectduration(this.fldDuration.gettext());
	this.animate.seteffecttype(this.cboType.getselectedcode());
}

애니메이트 기본 가이드

예시

화면 스크립트