애니메이트 기본 가이드

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

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

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

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

예시

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

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
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());
}

  • guide/component/animate/animate_basic.txt
  • 마지막으로 수정됨: 2024/08/26 16:31
  • 저자 127.0.0.1