ionic 3 앱 개발 (검색바 애니메이션) - [여행플랜/프런트]

이전 내용

여기까지 완성되었습니다. 여기서 우측 검색버튼을 누르면 검색바가 애니메이션 되게 만들어 보겠습니다!

모듈 설치 및 적용

Commend

1
2
C:\Users\wk647\Desktop\Tourpaln> npm install web-animations-js @angular/animations@5.0.3 --save
...

커맨드에서 애니메이션 라이브러리를 설치합니다. 라이브러리의 버전은 package.json파일에서 @angular/core의 버전과 동일하게 설치해주시면 됩니다.

… “@angular/core”: “5.0.3”, …

app/app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
...
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
/* 추가 내용 */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
     /* 추가 내용 */
    BrowserAnimationsModule,
  ],
...

설치한 모듈을 app/app.module.ts에 import합니다.

검색바 애니메이션 만들기

pages/home/home.ts

1
2
3
...
import { trigger, style, state } from '@angular/core';
...

애니메이션 라이브러리에서 사용할 모듈을 import 해줍니다.

pages/home/home.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
...
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  /* 추가 내용 */
  animations:[
    trigger('mysearchbar', [
        state('visible', style({
          opacity: 1
        })),
        state('invisible', style({
          opacity: 0
        }))
      ])
  ]
})
export class HomePage {
    visibleState = 'invisible';
...
  toggleVisible(){
    this.visibleState = (this.visibleState == 'visible') ? 'invisible':'visible';
  }
...

home.ts에서 애니메이션을 생성해야합니다!! @Component 부분에 animations 배열을 만들어주고 toggleVisible이라는 기능을 만들어줍니다.

간단하게 코드리뷰를 하자면 toggleVisible에서 visibleState 값을 확인해서 visible이면 invisible 혹은 invisible이면 visible로 변환을 해주는 로직이며, visibleState값에 따라 trigget로 설정된 태그가 지정해준 값에 따라 동작하는 방식입니다.

즉, trigger는 검색바가 되고! 검색버튼에는 toggleVisible 기능을 넣어주면 됩니다!

pages/home/home.html

1
2
3
4
5
6
7
8
9
...
<ion-searchbar [@mysearchbar]='visibleState' showCancelButton="True" placeholder="검색" animated="True">
</ion-searchbar>
<ion-buttons right>
  <button (click)="toggleVisible()" ion-button icon-only >
    <ion-icon name="search-icon" ></ion-icon>
  </button>
</ion-buttons>
...

이런식으로 하게 되면, 검색버튼을 누를때마다 visibleState 값이 바뀌면서 검색바가 나타났다 사라지고를 반복합니다.

여기서 transition 효과를 추가해서 좀더 애니메이션 같이 만들어 보도록 하겠습니다.

pages/home/home.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
/* 추가 내용 */
import { trigger, style, state, transition, animate } from '@angular/core';
...
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  animations:[
    trigger('mysearchbar', [
        state('visible', style({
          opacity: 1
        })),
        state('invisible', style({
          opacity: 0
        })),
        /* 추가 내용 */
        transition('* => *', animate('.5s'))
      ])
  ]
})
...

transition과 animate 모듈을 import해주고, state아래 다음과 같이 추가하면!!

짜잔~ㅎㅎ 다음시간에는 web-animation-js 와 함께 사용하면 더욱 인터렉티브한 화면을 디자인 할 수 있는 라이브러리에 대해 소개하도록 하겠습니다~

다음 내용

[ionic 3 앱 개발 (다양한 애니메이션) 포스팅]