====== 애니메이트 스핀버튼 효과 가이드 ======
이 화면은 애니메이트 컴포넌트를 이용한 스핀버튼 효과 샘플화면이다.
버튼을 클릭했을때 ratate API를 이용해 클릭한 버튼을 회전시키며, 이때 다른 버튼들을 이동시켜서 보이거나 숨긴다.
관련 속성으로 effect_duration가 있다.
관련 API로 geteffectduration, seteffectduration가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/ANIMATE/animate_spinbutton
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/ANIMATE/animate_spinbutton.xml|animate_spinbutton.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/ANIMATE/animate_spinbutton.js|animate_spinbutton.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/ANIMATE/animate_spinbutton|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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);
}
}