====== 애니메이트 기본 가이드 ======
이 화면은 애니메이트 컴포넌트 샘플화면이다.
애니메이트 컴포넌트를 이용하면 다른 컴포넌트들에 확대, 축소 혹은 이동시키는 효과를 줄 수 있다.
애니메이트 관련 속성으로 effect_type, effect_interval, effect_duration이 있다.
애니메이트 관련 API로 additem, deleteitem, play, stop, pause가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/ANIMATE/animate_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/ANIMATE/animate_basic.xml|animate_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/ANIMATE/animate_basic.js|animate_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/ANIMATE/animate_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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());
}