애니메이트 가이드

이 화면은 애니메이트 컴포넌트를 이용한 스핀버튼 효과 샘플화면이다.

버튼을 클릭했을때 ratate API를 이용해 클릭한 버튼을 회전시키며, 이때 다른 버튼들을 이동시켜서 보이거나 숨긴다.

관련 속성으로 effect_duration가 있다.

관련 API로 geteffectduration, seteffectduration가 있다.

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

템플릿 파일

var m_isRotate = false; // 현재 회전 상태 저장용 변수(false: 회전전, true: 회전후)
var m_nBtn0Top = 0; 	// 첫번째 버튼의 top 위치

function screen_on_load()
{
	var move_top, move_left;

	// 첫 번째 버튼의 위치 구하기
	move_top = this.btn_0.gettop();
	move_left = this.btn_0.getleft();

	// 버튼 위치 변경
	this.btn_1.setleft(move_left);
	this.btn_1.settop(move_top);
	this.btn_2.setleft(move_left);
	this.btn_2.settop(move_top);
	this.btn_3.setleft(move_left);
	this.btn_3.settop(move_top);

	// 버튼 순서 변경
	this.btn_3.setzorder(0);
	this.btn_2.setzorder(0);
	this.btn_1.setzorder(0);
	this.btn_0.setzorder(0);

	// 버튼 보이게 설정
	this.btn_3.setvisible(true);
	this.btn_2.setvisible(true);
	this.btn_1.setvisible(true);
	this.btn_0.setvisible(true);

	// rotate 중인 경우 top 위치가 달라지므로 화면 load 시점에 버튼 top저장
	m_nBtn0Top = this.btn_0.gettop();
}

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

function playAnimate(is_show)
{
	var size_delta, btn1_diff, btn2_diff, btn3_diff;
	var btn1_top, btn2_top, btn3_top;

	// 버튼들 사이 간격을 10px로 지정
	size_delta = this.btn_1.getwidth() + 10;

	// 현재 버튼들의 top위치 구하기
	btn1_top = this.btn_1.gettop();
	btn2_top = this.btn_2.gettop();
	btn3_top = this.btn_3.gettop();

	// 보이기
	if (is_show) {
		// 0번 버튼과 다른 버튼들 위치 차이 구하기
		btn1_diff = m_nBtn0Top - btn1_top;
		btn2_diff = m_nBtn0Top - btn2_top;
		btn3_diff = m_nBtn0Top - btn3_top;

		// 아이템 추가
		// 1번째 파라미터: 변경시킬 이미지 객체
		// 2번째 파라미터: 변경시킬 x값
		// 3번째 파라미터: 변경시킬 y값
		// 4번째 파라미터: 변경시킬 width값
		// 5번째 파라미터: 변경시킬 height값
		this.animate.additem(this.btn_1, 0, -(size_delta - (btn1_diff)), 0, 0);
		this.animate.additem(this.btn_2, 0, -(size_delta*2 - (btn2_diff)), 0, 0);
		this.animate.additem(this.btn_3, 0, -(size_delta*3 - (btn3_diff)), 0, 0);
	}
	// 숨기기
	else {
		// effect_type이 elastic 효과인 경우, 0번 버튼 아래로 이동되기도 하므로 절대값처리
		btn1_top = Math.abs(m_nBtn0Top - btn1_top);
		btn2_top = Math.abs(m_nBtn0Top - btn2_top);
		btn3_top = Math.abs(m_nBtn0Top - btn3_top);

		this.animate.additem(this.btn_1, 0, btn1_top, 0, 0);
		this.animate.additem(this.btn_2, 0, btn2_top, 0, 0);
		this.animate.additem(this.btn_3, 0, btn3_top, 0, 0);
	}

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

function btn_0_on_mouseup(objInst)
{
	var effect_duration;

	// 애니메이트의 effect_duration값 구하기
	effect_duration = this.animate.geteffectduration();

	// 360도 회전하면서 버튼들 표시하기
    if (m_isRotate == false) {
        m_isRotate = true;
        this.btn_0.rotate("z", 360, effect_duration, "ease", "");
		this.playAnimate(true);
    }
	// 버튼들 숨기기
    else {
        m_isRotate = false;
        this.btn_0.rotate("z", 0, effect_duration, "ease", "");
    	this.playAnimate(false);
	}
}

애니메이트 스핀버튼 효과 가이드

예시

화면 스크립트