본문 바로가기
개발/Ionic Framework (hybrid app)

HTML 및 CSS로 애니메이션 이오니아 시작 페이지를 만드는 방법

DANIEL.OH 2018. 3. 11. 16:52

기본 HTML과 CSS 팁을 사용하여 코드를 Ionic 2와 쉽게 호환 할 수있게되었습니다. 사실 적은 수의 코드 라인으로 프로세스가 훨씬 간단 해졌습니다.

프로젝트 시작하기


스플래시 페이지를 만드는 데 관심이 있다면 이미 Ionic CLI (Command Line Interface)가 설치되어 있다는 가정을 할 것입니다.

콘솔을 열고 빠른 프로젝트를 시작하십시오.

> ionic start ionic-splasher tabs --v2

탭 시작 템플릿을 사용할 필요가 없으며 공백이나 다른 것을 사용할 수 있습니다. 나는 페이지가 미리 채워져있어 특정 페이지를 방문 할 때마다 스플래시 페이지가로드되지 않는다는 것을 입증 할 수 있기 때문에 사용하기로했다. 일단 앱이로드되면로드하기를 원합니다. 권리!

설치가 완료되면 다음을 수행합니다.

> cd ionic-splasher
> ionic serve -l

ionic serve -l 을 실행하면 브라우저에 프로젝트가로드됩니다. 로드되는 기본 페이지가 홈  페이지인지 확인하십시오.

스플래쉬 HTML

앱이 시작될 때로드되는 기본 페이지로 이동합니다. 여기서는 /src/pages/home.html에 있습니다. 

home.html 의 상단에서 <ion-header>  바로 위에  :

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
  <div class="flb">
    <div class="Aligner-item Aligner-item--top"></div>
    <img src="assets/logo.svg">
    <div class="Aligner-item Aligner-item--bottom"></div>
  </div>
</div>

# 맞춤 오버레이  사업부는 전체 화면을 커버합니다. 우리가 사용하고있는 스타일 바인딩  CSS의의에 설정을 디스플레이  속성입니다. 는 IF 시작  속성이 true, 그것은 그것을 설정합니다 플렉스 ,하지 않을 경우, 그것은으로 설정됩니다 없음  .

.flb의  그것의 내부 클래스와 모든 선택 사항입니다.

스플래시 CSS

내 home.scss의  파일에 붙여 넣습니다 :

#custom-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  width:100%;
  background-color: #002a3e;
}

.flb {
  background-color: #3ebffb;
  height:100%;
  width:100%;
  animation: pulse 1s linear forwards;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Aligner-item {
  max-width: 50%;
}
.Aligner-item--top {
  align-self: flex-start;
}
.Aligner-item--bottom {
  align-self: flex-end;
}
#custom-overlay img {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: auto;
  animation: animation 3100ms linear infinite both;
  animation-delay: 1s;
}

여기서 핵심 요소는 # custom-overlay 입니다. 연관된 CSS 규칙 세트는 현재 페이지를 덮어 씁니다. 그 안의 다른 것들은 당신과 스플래시 페이지의 필요에 달려 있습니다.

나머지 CSS 룰 세트는 SVG 로고를 가운데 정렬 및 수직 정렬합니다.

선택적 애니메이션

.flb  클래스 에서 페이드와 같이 CSS 애니메이션을 적용하려면 방금 붙여 넣은 CSS의 아래쪽에 추가하십시오.

@keyframes pulse {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

데모를보고 로고에 적용된 복잡한 애니메이션 시퀀스를 발견했다면 많은 코드가 있습니다! 다행히도 저는 이것을 직접 코딩하지 않았습니다. 대신 Bounce.js를 방문 했습니다 . 이렇게하면 왼쪽 드롭 다운에서 미리 설정된 애니메이션을 선택하고 미리보고 CSS 내보내기를 클릭 할 수  있습니다.

그러면 주어진 애니메이션 시퀀스를 가능하게 해주는 @keyframes 애니메이션을 복사 할 수있는 큰 텍스트 영역이 열립니다.

원한다면 그렇게 할 수 있습니다. 지금은이 튜토리얼에서 많은 양의 CSS를 붙여 넣지는 않겠다.

모든 것을 작동 시키십시오.

다음 코드는 탭 기반의 Ionic 2 레이아웃을 사용하는 경우 약간 다를 수 있습니다. 탭 레이아웃을 사용하는지 여부에 따라 필요로하거나 필요하지 않은 것에 대한 메모를 작성합니다.

home.ts  파일을 열고 탭을 사용하지 않는 경우 다음을 붙여 넣으십시오  .

export class HomePage {
  
  splash = true;
  secondPage = SecondPagePage;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
    setTimeout(() => this.splash = false, 4000);
  }

}

당신이하는 경우 탭을 사용하여  이 튜토리얼, 개방의 경우와 같이 home.ts  다음에 붙여 넣기를 :

export class HomePage {
  tabBarElement: any;
  splash = true;

  constructor(public navCtrl: NavController) {
    this.tabBarElement = document.querySelector('.tabbar');
  }

  ionViewDidLoad() {
    this.tabBarElement.style.display = 'none';
    setTimeout(() => {
      this.splash = false;
      this.tabBarElement.style.display = 'flex';
    }, 4000);
  }


}

스플래시 페이지가 맨 아래의 탭 표시 줄을 덮지 않기 때문에 탭을 사용하는 경우 약간의 추가 작업이 필요합니다. 위 코드는 앱로드시 탭 표시 줄을 숨긴 다음 setTimeout ()  함수 내에 표시합니다 .

스플래시 오버레이 자체와 동일한 시나리오가 두 시나리오에서 모두 발생합니다. 시작  속성이 설정되어 진정한 기본적으로 다음 사초 (에서 4000 MS ), 그것은으로 설정되어 거짓 .

기본 시작 화면 제거

Ionic-CLI를 사용하면 응용 프로그램이 시작될 때로드되는 기본 시작 화면을 사용할 수 있습니다. 우리는 더 이상 필요하지 않습니다.

따라서 /config.xml을 열고  다음 환경 설정에 붙여 넣으십시오.

<preference name="SplashScreenDelay" value="0"/>
<preference name="ShowSplashScreen" value="false"/>

 

마지막 생각들

 CSS에서 발생하는 애니메이션을 기반으로 setTimeout 지연 시간을 적절히 조정 해야합니다 . 이제  스플래시 페이지에 애니메이션을 적용 할 필요 는 없습니다 . 이온 스플래시 페이지에 HTML과 CSS를 사용할 수있게되었으므로 여러 가지 작업을 수행 할 수 있습니다.


티스토리툴바