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

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

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

관련 속성으로 effect_duration가 있다.

관련 API로 geteffectduration, seteffectduration가 있다.

예시

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

템플릿 파일

화면 스크립트

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

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